通过动态添加删除行和列来调整html表的大小？

Question

我希望能够从html表(又名)中添加删除行列。调整大小)

表应该是矩形的，稍后它将表示一些2D数组值。

由于这张桌子会被刷新很多次，而且可能会变大，我不认为它是一个很好的解决方案来清空它，并再次填充它。

我想对我现在的单元格进行调整，并在处理新单元之前清除以前编辑过的单元格。

我的问题是调整大小，我可以通过迭代行和添加移除单元格来想出一些解决方案，然后添加删除行，但我问是否有现成的解决方案使用js或jQuery来完成这项工作，或者至少添加删除列？

样本表(5x3)

​

​

<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

下面是一个例子。在这里工作jsFiddle

我在你的桌子下面加了几个按钮来开始表演：

<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()

参考文献

Answer 2

以另一种方式删除该列，允许您删除表中的任何列。

工作jsFiddle实例

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)
});

参考文献：

用单行jQuery隐藏表列

使用jQuery通过单击表行删除表行

Answer 3

如果要删除一行，只需删除tr标记即可。如果您想删除一个列，它会更复杂一些。你得把他移走。在所有tr标记中，第一个td标记。然而，使用jQuery并不难。您可以使用eq选择器(如$('#table1 tr td:eq(0)') )访问每个第一个td，从而删除该列。