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

我看到的唯一问题是新行：当你需要继续下一行时，你需要转义新行char，如：

var str = '11111\
llllllll';

摘录：

＆＃13;

$(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>');
  });
});

＆＃13;

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

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button id="addbutton">addbutton</button>
<table id="searchresults">
    <tbody>

    </tbody>
</table>

＆＃13;

Answer 2

$("#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>')

如上所示<td> <div>之间有一个空格。有人编辑了这个问题并将其删除了。

请不要随意编辑问题。显然在增加空间可以搞砸了！

内容中的自定义占位符未显示

2 个答案: