CODEWITHSUNDEEP
javascriptjqueryhtml
rockfight
rockfight

Reputation: 1996

How to update td based on th?

I have a HTML table with following structure

<thead>
                        <tr>
                            <th>COMPANY</th>
                            <th>DATE</th>
                            <th>SHARE</th>
                            <th>COST PRICE</th>                                 
                        </tr>                
</thead>

In the data section I have following structure.

<tr>
                            <td rowspan="2">COMPANY1</td>
                            <td>DATE1</td>
                            <td>SHARE1</td>
                            <td>COST PRICE1</td>                                 
</tr>

when I try to update the <td>s in the table dynamically from jquery I need to add some logic to check if first element has spanned multiple rows. I wanted to ask if we can update row based on the header, something like associative array.

Like this pseudo code $(this).td[<WHERE th=SHARE>].text("something)

Upvotes: 0

Views: 101

Answers (1)

Chaska
Chaska

Reputation: 3205

I suggest that you should assign <td>s a class name when preparing the html mark up like this:

<tr>
  <td class="company" rowspan="2">COMPANY1</td>
  <td class="date">DATE1</td>
  <td class="share">SHARE1</td>
  <td class="cost-price">COST PRICE1</td>                                 
</tr>
<tr>
  <td class="date">DATE1</td>
  <td class="share">SHARE1</td>
  <td class="cost-price">COST PRICE1</td>                                 
</tr>

Javascript will be like this:

$('tr').each(function() {
  $(this).children('td.share').text('Share...');
  $(this).children('td.cost-price').text('Cost Price...');
});

Upvotes: 1

Related Questions