通過動態添加刪除行和列來調整html表的大小？

Question

我希望能夠從html表中添加刪除行列（也就是調整它的大小）

表格應該是矩形的，它將在稍後表示一些2D數組值。

由於表格會刷新多次，並可能會變大，我認爲這不是一個很好的解決方案，將其清空並重新填充。

我想重新調整我現在使用的一個，並在處理新的單元格之前清除之前編輯過的單元格。

我的問題是在調整大小，我可以通過迭代遍歷行和添加刪除單元格，然後添加刪除行，但我問是否有一些現成的解決方案使用js或jQuery做這項工作或至少添加刪除列？

樣品表（5×3）

<table class="table-editor" id="table1"> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <tbody> 
     <tr class="highlighted-row"> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr class="normal-row"> 
     <td></td> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr class="normal-row"> 
     <td></td> 
     <td></td> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

下面是一個例子。 Working jsFiddle here

我加了你的表下面的按鈕來啓動顯示：

<input id="addcol" type="button" value="Add Column" /> 
<input id="remcol" type="button" value="Reomve Column" /> 
<input id="addrow" type="button" value="Add row" /> 
<input id="remrow" type="button" value="Remove row" /> 

的jQuery/JavaScript的：

$(document).ready(function() { 

$('#addcol').click(function() { 
    var $tablerow = $('table.table-editor').find('tr'); 
    count = 0; 

    $tablerow.each(function(index, value){ 
     count += 1; 
     //alert('Working on row: ' + count); 
     var $listitem = $(this); 
     //alert('ListItem: ' + $listitem.index()); 
     n = parseInt($listitem.index()); 
     //alert('Value of n: ' + n); 
     var $newRow = $("<td>" + n + "</td>"); 
     $("table.table-editor tr:eq(" + n + ")").append($newRow); 
    }); 
}); 

$('#remcol').click(function() { 
    var $tablerow = $('table.table-editor').find('tr'); 

    $tablerow.each(function(index, value){ 
     $("table.table-editor tr:eq("+index+") td:eq(-1)").remove(); 
    }); 
}); 

$('#addrow').click(function() { 
    $('table.table-editor').append("<tr></tr>"); 
    $('table.table-editor tr:eq(0) td').each(function(index, value){ 
     $("table.table-editor tr:eq(-1)").append("<td>"+index+"</td>"); 
    }); 
}); 

$('#remrow').click(function() { 
    $('table.table-editor tr:eq(-1)').remove(); 
}); 

}); //END $(document).ready() 

Reference

Answer 2

如果你想刪除行，你可以只需刪除tr標籤。如果你想刪除一列，它會更復雜一點。你必須刪除例如。在所有tr標籤中第一個td標籤。但是，使用jQuery並不難。您可以使用eq選擇器（如$('#table1 tr td:eq(0)')）訪問每個第一個td並因此刪除該列。

Answer 3

另一種刪除列的方法，允許您刪除表中的任何列。

Working jsFiddle example

HTML：

<h1>Add/Remove Column Example:</h1> 
<span class="blurb">Instructions:<br/>1. Click Add Column button to append table to end.<br />2. Click <span class="remove">rem</span> to remove THAT column. <br />3. Code is currently set to COLORIZE rather than remove, just adjust in code and click RUN button at top left.</span><br/><br/> 
<table class="table-editor" id="table1"> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <colgroup class=""></colgroup> 
    <tbody> 
     <tr class="highlighted-row"> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr class="normal-row"> 
     <td></td> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr class="normal-row"> 
     <td></td> 
     <td></td> 
     <td>•</td> 
     <td></td> 
     <td></td> 
     </tr> 
     <tr class="normal-row"> 
     <td class='remove'>rem</td> 
     <td class='remove'>rem</td> 
     <td class='remove'>rem</td> 
     <td class='remove'>rem</td> 
     <td class='remove'>rem</td> 
     </tr> 
    </tbody> 
</table> 
<input id="addcol" type="button" value="Add Column" /> 

jQuery代碼：

$('#addcol').click(function() { 
    var $tablerow = $('table.table-editor').find('tr'); 
    count = 0; 

    $tablerow.each(function(index, value){ 
     count += 1; 
     //alert('Working on row: ' + count); 
     var $listitem = $(this); 
     //alert('ListItem: ' + $listitem.index()); 
     n = parseInt($listitem.index()); 
     //alert('Value of n: ' + n); 
     if (n == 3) { 
      var $newRow = $("<td class='remove'>rem</td>"); 
      $("table.table-editor tr:eq(" + n + ")").append($newRow); 
     }else{ 
      var $newRow = $("<td>" + n + "</td>"); 
      $("table.table-editor tr:eq(" + n + ")").append($newRow); 
     } 
    }); 
}); 

$(document).on('click', 'td.remove', function() { 
    var ndx = $(this).index() + 1; 
    //alert('Val of ndx: ' + ndx); 
    $('td:nth-child(' +ndx+ ')').css('background-color','red'); //comment this line to remove (see next line) 
    //$('td:nth-child(' +ndx+ ')').remove(); //UNCOMMENT this line to remove (see prev line) 
}); 

參考文獻：
Hide table column with single line of jQuery
Use jQuery to delete table row by clicking on it