问题描述:

I'd like to be able to add remove rows columns from a html table (aka. resize it)

The table should be rectangular, it'll represent some 2D array value later.

As the table will be refreshed many times and could get big in size, i don't think it'll be a good solution to empty it and fill it again.

I thought of resizing the one i have now and clearing the previous edited cells before working on the new ones.

My problem is in resizing, i could think of some solution by iterating through rows and adding removing cells, then add remove the rows, but i'm asking if there's some ready solution using js or jQuery to do this job or at least add remove columns ?

Sample Table (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>

网友答案:

Here's an example. Working jsFiddle here

I added the buttons below your table to start the show:

<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

网友答案:

For another way to remove the column, allowing you to remove any column in the table.

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 Code:

$('#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)
});

References: Hide table column with single line of jQuery Use jQuery to delete table row by clicking on it

网友答案:

If you want to remove a row, you can simply delete the tr tag. If you want to delete a column, it is a bit more complicated. You'd have to remove eg. in all tr tags the first td tag. However, using jQuery this is not so hard. You can use the eq selector, like $('#table1 tr td:eq(0)'), to access every first td and thus remove the column.

相关阅读:
Top