ansaurus

Question

Modifying the structure of a HTML table with jQuery

Answer 1

+1 A:

Assuming you are starting with one cell in each row and that each cell has one label and one input then I think that you want something like this:

$('#myTable tr').each(function() {
    $('<td/>').append( 
      $(this).find('td input') 
    ).appendTo(this);
  });

Prestaul 2008-11-04 14:37:19

I've made some clarifications about what I exactly want...Your example separate the input from the label. In fact I don't want to divide elements of a cell, but regroups 2 cells in the same row...

romaintaz 2008-11-04 16:05:03

Answer 2

+2 A:

Interesting exercise. This does what you ask, however it might not be exactly what you want. But it tells you how it can be done. You can

tweak it to where it works the way you expect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Example of restructuring tables</title>
    <script src="Scripts/jquery-1.2.6.commented.js"></script>
</head>
<!--<body><table id="Table1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>-->
<table id="myTable">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        debugger;
        var tds = $("#myTable tr td"); // gets all td elements in the table with id myTable
        var col1 = $("<tr></tr>"); // holds our first row's columns
        var col2 = $("<tr></tr>"); // holds our second row's columns
        var halfway = Math.ceil(tds.length / 2);
        // add the first half of our td's to the first row, the second half to the second
        for (var i = 0; i < tds.length; i++) {
            if (i < halfway)
                col1.append(tds[i]);
            else
                col2.append(tds[i]);
        }
        // clear out the clutter from the table
        $("#myTable").children().remove();
        // add our two rows
        $("#myTable").append(col1);
        $("#myTable").append(col2);
    });
</script>
</body>
</html>

See, your example of how you wanted it to end up put everything in two rows, yet your question said "two columns". I did two rows just because it was easier. You just need to modify the for loop so that its more along this line

Will 2008-11-04 15:11:53

Your code indeed modify the table and separate all elements into two rows...Not exactly what I wanted to do, but this code can be modified to have two columns instead of two rows...

romaintaz 2008-11-04 16:11:51

Thanks! Might not have been the accepted answer here, but sure was usefull to me..

Tim 2009-03-06 10:44:06

Answer 3

+3 A:

Given the additional information you've provided, I think that this is what you want. It traverses the table moving the cells from every second row into the previous row...

var idx = 1;
var row, next;
while((row = $('#myTable tr:nth-child(' + idx++ + ')')).length) {
    if((next = $('#myTable tr:nth-child(' + idx + ')')).length) {
        row.append(next.find('td'));
        next.remove();
    }
}

Prestaul 2008-11-04 17:34:40

Selector power, activate!

Will 2009-03-09 11:47:40

we can also ':eq' instead of ':nth-child' .for ':eq' , argument is a zero-based index.for ':nth-child' , argument is one-based index.As a programmer, i like ':eq' since its zero based like most of programming languages and clean.

Palani 2009-08-13 13:52:11

ansaurus

tags:

views:

answers:

Modifying the structure of a HTML table with jQuery

related questions