テーブルに新しい列を追加するときに現在の行をデフォルトのセルで塗りつぶす

Question

私はHTMLテーブルを作成し、ボタンイベントに行と列を追加します。 これは私のコードです：

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" 
     } 
    } 

だから私は、新しい列が追加されたときに、古い行に新しい細胞を設定します。行を自動的に既定のテキストで塗りつぶします。

インデックスを数えなければなりませんか？ 私はx列を持っている行yのzセルが設定され、行方不明のものを埋める..？

Answer 1

問題を正しく理解していれば、現在の行にも新しい列を追加する必要がありますか？

が続いてトリックを行う必要があり、このような何か（私は右のplsを理解していなかった場合、私は削除したり、私の答えを更新することができますので、コメント）：

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

 
     $('#tableBody').find("tr").each(function() { 
 
      $(this).append('<td>Content</td>'); 
 
     }); 
 
} 
 

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

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

 
     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" 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr id="tableHeader"><th>Header</th></tr> 
 
    <tbody id="tableBody"> 
 
    </tbody> 
 
</table> 
 

 
<input onclick="AddColumnToDataTable();" type="button" value="Column" /> 
 
<input onclick="AddRowToDataTable();" type="button" value="Row" />