0

我希望能够从 html 表中添加删除行列（又名。调整它的大小）

表格应该是矩形的，稍后它将代表一些二维数组值。

由于桌子将被刷新多次并且尺寸可能会变大，因此我认为将其清空并再次填充它不是一个好的解决方案。

我想调整我现在拥有的单元格的大小并在处理新单元格之前清除以前编辑的单元格。

我的问题在于调整大小，我可以通过遍历行并添加删除单元格，然后添加删除行来考虑一些解决方案，但我问是否有一些现成的解决方案使用 js 或 jQuery 来完成这项工作，或者至少添加删除列？

样品台 (5x3)

样品台 (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>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td></td>
        <td>•&lt;/td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>
4

3 回答 3

3

这是一个例子。在这里工作 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()

参考

于 2013-08-20T22:40:12.113 回答
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>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td>•&lt;/td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="normal-row">
        <td></td>
        <td></td>
        <td>•&lt;/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点击删除表格行

于 2013-08-21T17:16:34.733 回答
1

如果要删除一行，只需删除 tr 标签即可。如果要删除列，则要复杂一些。你必须删除例如。在所有 tr 标签中，第一个 td 标签。然而，使用 jQuery 这并不难。您可以使用 eq 选择器，例如$('#table1 tr td:eq(0)')，访问每个第一个 td，从而删除该列。

于 2013-08-20T22:40:13.460 回答