Benutzerdefinierter Platzhalter innerhalb des Elements wird nicht angezeigt

Question

Ich verwende JQuery, um dynamisch eine neue Zeile zu einer Tabelle hinzuzufügen.
Ich möchte einen Platzhalter in den Tabellenzellen haben, die verschwinden, wenn der Benutzer auf die Texteingabe klickt.
Ich habe versucht, CSS, das dies tun würde. Hier

ist die 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>') 

Hier ist die CSS:

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

Der Platzhalter Text ist nicht zeigt nach oben.
Irgendwelche Vorschläge?

Ive die Frage aktualisiert, so dass die neue Zeile korrekt in der Zeichenfolge in .append('') gespleißt wird Ich kann immer noch nicht den Text angezeigt werden. Ich benutze Safari auf El Capitan. Die neue Zeile wird hinzugefügt und ist editierbar, aber der Text ist nicht da!

Die Zeilen werden hinzugefügt und sind auch editierbar. Es ist nur so, dass der Text nicht sichtbar ist.

Answer 1

Das einzige Problem, das ich sehe, ist die neuen Linien: Wenn Sie in der nächsten Zeile fortsetzen müssen müssen Sie die neue Linie char zu entkommen wie in:

var str = '11111\ 
llllllll'; 

Das Snippet:

$(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>

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>') 

Es war ein Abstand zwischen <td> <div> wie oben gesehen. Jemand hat die Frage bearbeitet und sie entfernt.

Bitte bearbeiten Sie Fragen nicht nach Ihren eigenen Wünschen. Anscheinend hinzufügen Platz in kann Dinge vermasseln!