CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Get value of a table cell in another row

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>

Upvotes: 1

Views: 356

Answers (2)

Zack
Zack

Reputation: 2869

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>

Upvotes: 3

Zack
Zack

Reputation: 2869

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

Upvotes: 0

Related Questions