Добавляя новый столбец, добавьте celldata в индекс столбца

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать datatable-manager с помощью javascript и jquery . Когда я добавляю новый столбец в таблицу, я хочу заполнить все ячейки во всех строках в индексе столбца «defaulttext».

пример изображения

Как вы можете видеть на рисунке, ячейки в индексе нового столбца должны содержать текст.

Как новичок, я испытываю трудности с кодом. Я надеюсь, что кто-нибудь поймет, чего я хочу достичь, и сможет помочь 🙂

 function AddColumnToDataTable(){

      $('#tableHeader').append("<td>"   GetEmptyText()   "</td>"); 
      // Add a new Column Header to the Table

      var columnIndex =  $('#dataTable').rows[2].cells.length; 
      // The columnIndex of the new column (the headers start on row 3)

      var rowCount = (-3)   $('#dataTable').getElementsByTagName("tr").length; 
      // Count the rows except the first 3 rows / only the data rows not the title, header and button rows

      var textToAppend = "<td>"   GetEmptyText()   "</td>"; 
      // the default text to fill

      var rows = $('tr', '#dataTable'); 
      // get the rows in the table

    for (var i = 3; i <= rowCount; i  ) {
      rows.eq(i).html(textToAppend);         
      // loop through all rows starting on row 3 and add the text
    // the column index is missing
    }
}
  

Комментарии:

1. вы могли бы сделать что-то вроде этого: jsfiddle.net/mvsxbysn

2. Спасибо за ваш ответ. Когда у меня есть cellindex, как я могу использовать это после добавления текста на 3 строки выше? Возможно, я недостаточно хорошо понимаю ваш код :/

3. jsfiddle.net/maverickosama92/mvsxbysn/1 как насчет этого.

4. нормально ли иметь функцию в цикле =?

5. да, вы можете иметь. Решило ли это вашу проблему или нет?

Ответ №1:

Спасибо, я получил это с помощью

 function AddColumnToDataTable(){
  $('#tableHeader').append("<th> Header </th>");
  $('table th').last().attr("contenteditable", true).focus();
  $('#tableBody').find("tr").each(function() {
          $(this).append("<td> Content </td>");
      });
}