javascript - Resize html table by adding removing rows and columns dynamically? - Stack Overflow

admin管理员组

文章数量:1332377

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>

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>

• javascript
• jquery
• html-table

Share Improve this question Follow edited Aug 18, 2018 at 13:30 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 20, 2013 at 22:26 Ali EssamAli Essam 50211 gold badge77 silver badges1717 bronze badges 2

• Your question is similar to this one: stackoverflow./questions/16183231/… – Marko Gresak Commented Aug 20, 2013 at 22:41
• Ali, I added another post with a different solution for removing the columns. This one allows you to remove any table col, not just the last one on the table grid. If it is helpful to you, please upvote (no need to change the correct answer). – cssyphus Commented Aug 21, 2013 at 17:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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'); //ment 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 plicated. 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.

本文标签： javascriptResize html table by adding removing rows and columns dynamicallyStack Overflow