CODEWITHSUNDEEP
javascriptjquery
Andy Chaves
Andy Chaves

Reputation: 137

How to get Rowspan Rows Values with JS or jQuery

I am trying to extract the td values belonging a td rowspan.

<!DOCTYPE html>
<html>
<body>
<table border="1">
    <tr>
        <th>Month</th>
        <th>Expenses</th>
        <th>Exp/ Divided</th>
    </tr>
    <tr>
        <td rowspan="2">January</td>
        <td rowspan="2">$100</td>
        <td>$50</td>
    </tr>
    <tr>
        <td>$50</td>
    </tr>
    <tr>
        <td rowspan="3">February</td>
        <td rowspan="3">$400</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>$150</td>
    </tr>
    <tr>
        <td>$100</td>
        <tr></tr>
</table>
</body>
</html>

So if I click on January for example I have to extract its divided expenses: $50, $50

if I click on February I have to extract its divided expenses: $150, $150, $100

Upvotes: 2

Views: 10388

Answers (2)

Eduardo La Hoz Miranda
Eduardo La Hoz Miranda

Reputation: 2060

With jquery you can simply select the objects like so:

$("td[rowspan='2']");

To get the containing values it would be:

$("td[rowspan='2']").text();

More on this: http://api.jquery.com/attribute-equals-selector/

Upvotes: -1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(function(){
    $('.rowspan').on('click',function(){
        $tr=$(this).closest('tr');
        rowspan=$(this).attr('rowspan');
        index=$('tr').index($tr);
        tot=parseInt(index)+parseInt(rowspan);
        for(var i=index,len=tot;i<len;i++){
            console.log($('tr:eq('+i+') td:last').text());
        }
    });
});

Working Demo

Upvotes: 3

Related Questions