1

I have a table with several rows. 

<table width="100%" border="0">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448"> val 6</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>

I need to combine values from data attribute of in first and last rows and place it into td of row 2, in each column.

Now, it is easy to get the values from row 1, because the cells align.

$('tr:nth-child(2) td').each(function () {
        var r2cel = $(this).index(),
            r1val = $('tr:first td').eq(r2cel).data(r1),
            r3val = ???;

        $(this).text(r1val + ', ' + r3val);
 });

How do I get the values from the row where cells can have colspan > 1 ?

The end result I'm looking for will look like this:

<table width="100%" border="0">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448"> val 6</td>
  </tr>
  <tr>
    <td>123, aaa</td>
    <td>332, aaa</td>
    <td>144, aaa</td>
    <td>654, ddd</td>
    <td>443, ggg</td>
    <td>448, ggg</td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>
santa
  • 12,234
  • 49
  • 155
  • 255

2 Answers2

3

Here is a code snippet that does what you want!

You can see that you would need to get the values of the data-r1 attributes using jQuery, and combine them to fill the second row with the appropriate values.

For the third row, I had to do some special processing to handle the existence of the colspan attribute, so you will want to pay particular attention to that part.

// All rows
var rows = $('table tr');
//console.log('rows:' + rows.length);

// Row 1
var r1tds = $(rows[0]).find('td');
//console.log('cells:' + r1tds.length);

// Row 2
var r2tds = $(rows[1]).find('td');

// Row 3
var r3tds = $(rows[2]).find('td');

// Get data values from row 3
var r3cellValues = [];
for (x = 0; x < r3tds.length; x++) {
  var colspan = $(r3tds[x]).attr('colspan');
  if (colspan !== undefined) {
    for (y = 0; y < colspan; y++) {
      r3cellValues.push($(r3tds[x]).attr('data-r1'));
    }
  } else {
    r3cellValues.push($(r3tds[x]).attr('data-r1'));
  }
}
//console.log(r3cellValues.length);

// Update the html of row 2 with combined values.
for (x = 0; x < 6; x++) {
  //console.log($(r1tds[x]).attr('data-r1') + ' ' + r3cellValues[x]);
  $(r2tds[x]).html($(r1tds[x]).attr('data-r1') + ' ' + r3cellValues[x]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="1">
  <tr>
    <td data-r1="123">val 1</td>
    <td data-r1="332">val 2</td>
    <td data-r1="144">val 3</td>
    <td data-r1="654">val 4</td>
    <td data-r1="443">val 5</td>
    <td data-r1="448">val 6</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3" data-r1="aaa">row 3 val 1</td>
    <td data-r1="ddd">row 3 val 2</td>
    <td colspan="2" data-r1="ggg">row 3 val 3</td>
  </tr>
</table>
Zack
  • 2,789
  • 33
  • 60
0

You can use the .filter() jquery method to filter results that have a colspan attribute that is greater than 1 like this.

$('td').filter(function() {
    return $(this).attr("colspan") > 1;
})

jQuery: Selecting all elements where attribute is greater than a value

Community
  • 1
  • 1
Zack
  • 2,789
  • 33
  • 60
  • @Zach, please see my edits above. My issue is not with selecting by colspan but rather getting the right value from the cells that correspond to the cells in the same column. – santa Mar 13 '15 at 19:20
  • Your question is still not very clear. Are you using the first table you showed as input, and want to create a second table that shows just the combined values, or are you just wanting to insert the combined values into the second row's td elements? – Zack Mar 13 '15 at 19:26
  • No, it's the same table. It is output with PHP, but I need to use jquery to get values from top and bottom rows to populate middle row. UPDATED to clarify. – santa Mar 13 '15 at 19:28
  • OK, I see what you mean now. You want to get the values from row 1, and combine that with the value in the *corresponding* column in row 3, and put that combined value in the cell for row 2. – Zack Mar 13 '15 at 20:10
  • OK, I posted a separate answer that should show you what to do in that case. – Zack Mar 13 '15 at 20:56