vendredi 28 octobre 2016

Jquery contenteditable for all cells not rows

i create a table by adding rows and columns with JS and Jquery. This is my code:

 function AddColumnToDataTable(){
      $('#tableHeader').append("<th> Header </th>").attr("contenteditable", true); 
// Add a new ColumnHeader and set the property "editable"
    }

    function AddRowToDataTable(){
      var count = $('#tableHeader').find("th").length; 
// Get the count of Columns in the table

      var newRow = $('#tableBody').append("<tr></tr>"); 
// Add a new Row

      for(var i = 0; i < count ; i++){
          newRow.find('tr').last().append("<td> Content </td>").attr("contenteditable", true); 
// Fill the cells with a default text and set the property "editable"
      }
    }

So my question is, how can i write the code, that each cell is editable? At the moment, when i click, the whole row goes editable? Each cell should have that property.

I found a code that could help

//$('table th:nth-child(4)').attr("contenteditable", true)

This makes the 4th header/cell editable. But how can i use it, each new created header/cell is the nth-child ?




Aucun commentaire:

Enregistrer un commentaire