5

I am using JQuery to dynamically add a new row to a table.
I would like to have a placeholder inside the table cells that go away when the user clicks to enter text.
I attempted to make CSS that would do this.

Here is the 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>')

Here is the CSS:

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

The placeholder text isnt showing up.
Any suggestions ?

Ive updated the question so that the new line is correctly spliced in the string inside .append('') I still cannot get the text to appear. I am using Safari on El Capitan. The new row is added and is editable but the text isnt there !

The rows get added and are also editable. Its just that the text is not visible.

marc
  • 797
  • 1
  • 9
  • 26

2 Answers2

3

The only problem i see is the new lines: when you need to continue on the next line you need to escape the new line char like in:

var str = '11111\
llllllll';

The 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>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • Still cant get the text to show. Strange – marc Aug 05 '16 at 21:32
  • @asehgal Did it work in my snippet? – gaetanoM Aug 05 '16 at 21:34
  • It's all about character escaping. Here is a [codePen](http://codepen.io/Bes7weB/pen/YWJJEE) made of @gaetanoM code. But if you "escape", like he suggest, at line end **AND** indent you next line with tabs... Naaah. The escape counted only for the newline char! Look at my [CodePen here](http://codepen.io/Bes7weB/pen/xOyyRV) wich allows cool indentation – Louys Patrice Bessette Aug 05 '16 at 22:00
  • Nope. Didnt help either. If line splicing was an issue, it probably wont even add the rows and make the content editable. The rows are added and are also editable. Its just that the text is not visible. – marc Aug 05 '16 at 22:03
0
$("#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>')

There was a space between <td> <div> as seen above. Someone edited the question and removed it.

Please do not edit questions at your own whim. Apparently adding space in can screw things up !

marc
  • 797
  • 1
  • 9
  • 26