0

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)

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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Ali Essam
  • 502
  • 1
  • 7
  • 17
  • Your question is similar to this one: http://stackoverflow.com/questions/16183231/jquery-append-and-remove-dynamic-table-row – Marko Gresak Aug 20 '13 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 Aug 21 '13 at 17:18

3 Answers3

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

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Thank you, i've updated your snippet and added (Remove Column-Add row-Remove row) based on your code and @user2433059 's answer, please update your answer so i can accept it :) – Ali Essam Aug 20 '13 at 23:48
2

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

cssyphus
  • 37,875
  • 18
  • 96
  • 111
1

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.

benestar
  • 552
  • 4
  • 12