元素内部的自定义占位符<td>没有显示

Custom placeholder inside element <td> not showing

本文关键字：td gt 显示 lt 内部 自定义 占位符 元素      更新时间：2023-09-26

我正在使用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。新行已添加并可编辑，但文本不存在

将添加这些行，并且这些行也是可编辑的。只是文本不可见

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

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)
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button id="addbutton">addbutton</button>
<table id="searchresults">
    <tbody>
    </tbody>
</table>

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

如上所述，在CCD_ 2之间存在空间。有人编辑了问题并将其删除。

请不要随意编辑问题显然增加了空间会把事情搞砸的！

相关文章：