CODEWITHSUNDEEP
javascripthtml
Mark
Mark

Reputation: 314

html table value swapping

I have two tables created in html.. How could I move rows from one table to another table by choosing row via checkbox? Can anyone give me a sample JS to do this. Thanks

Upvotes: 2

Views: 365

Answers (3)

sshow
sshow

Reputation: 9094

You can do this using jQuery. Something like this should do the job.

$(function() {
    // Bind button
    $('#moveRows').click(moveSelectedRows);
    // Select All-button
    $('#selectAll').click(function() {
        $('#table1 input[type="checkbox"]').prop("checked", true);
    });
});

function moveSelectedRows() {
    $('#table1 input[type="checkbox"]:checked').each(function() {
        // Remove from #table1 and append to #table2
        $('#table2').append($(this).closest('tr').remove());
        // Remove the checkbox itself
        $(this).remove();
    });
}

HTML

<a href="#" id="selectAll">Select All</a>

<table id="table1">
    <tr>
        <td>Foo1 <input type="checkbox" /></td>
    </tr>
    <tr>
        <td>Bar2 <input type="checkbox" /></td>
    </tr>
</table>

<table id="table2">
    <tr>
        <th>Selected rows</th>
    </tr>
</table>

<a id="moveRows" href="#">Move rows</a>

Upvotes: 1

Kunal Vashist
Kunal Vashist

Reputation: 2471

THis is simplest way to copy the content of one tr to another tr

see this fiddle

The key point is to get the innerHTML and move it to desired part

Upvotes: 0

Muhammad Alvin
Muhammad Alvin

Reputation: 1210

Try this:

<script type="text/javascript">
function moveIt() {
  $('#table-1 input[type=checkbox]:checked').each(function() {
    var tr = $(this).parents('tr').get(0);
    $('#table-2').append($(tr));
  });
}
</script>

<table border="1" id="table-1">
  <tr>
    <td><input type="checkbox"></td>
    <td>First</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Second</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Third</td>
  </tr>
</table>

<table border="1" id="table-2">
</table>

<input type="button" onclick="moveIt()" value="move selected lines from table-1 to table-2" />

Don't forget to include jQuery.

Upvotes: 1

Related Questions