元素 <td> 内的自定义占位符未显示

Question

我正在使用 JQuery 动态地将新行添加到表中。
我希望在表格单元格内有一个占位符，当用户单击输入文本时该占位符会消失。
我试图制作可以做到这一点的CSS。

这是 JQuery：

$("#addbutton").click( function(){
    $('#searchresults > tbody:last-child').append('<tr><td> <div contentEditable="true" data-text="Enter Name"></div> </td> \
                                                       <td><div contentEditable="true" data-text="Enter Description"> </div> </td>
                                                   </tr>')

这是CSS：

<style>
[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-text)
}
</style>

占位符文本未显示。
有什么建议 ？

我已经更新了问题，以便新行正确拼接在内部字符串中，但.append('')我仍然无法显示文本。我在 El Capitan 上使用 Safari。新行已添加且可编辑，但文本不存在！

行被添加并且也可以编辑。只是文字不可见。

Answer 1

我看到的唯一问题是新行：当您需要继续下一行时，您需要转义新行字符，如下所示：

var str = '11111\
llllllll';

片段：

var str = '11111\
llllllll';

$(function () {
  $("#addbutton").click(function() {
    $('#searchresults > tbody:last-child').append('<tr><td><div contentEditable="true" data-text="Enter Name"></div></td>\
<td><div contentEditable="true" data-text="Enter Description"></div></td>\
</tr>');
  });
});

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-text)
}