When someone clicks on the Download button in my table, I want to pass the date values from that particular row to a function. Currently I can only pass the date values from the first table row.

This is the selector I'm using:

$(this).parent().find('#period-start');

Which always returns:

[<td id=​"period-start">​5/1/2013​</td>]

I've tried binations of the parent, child, find and closest selectors, but haven't been able to stumble across the correct one to grab the date values from the current row. Thanks.

Table

<table id="tblStatements" class="table">
            <thead>
                <tr>
                    <th>Period Starting</th>
                    <th>Period Ending</th>
                    <th>Download</th>
                </tr>
            </thead>
            <tbody>

<tr>
  <td id='period-start'>5/1/2013</td>
  <td id='period-end'>5/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td id='period-start'>4/1/2013</td>
  <td id='period-end'>4/30/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td id='period-start'>3/1/2013</td>
  <td id='period-end'>3/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

</tbody>
</table>

When someone clicks on the Download button in my table, I want to pass the date values from that particular row to a function. Currently I can only pass the date values from the first table row.

This is the selector I'm using:

$(this).parent().find('#period-start');

Which always returns:

[<td id=​"period-start">​5/1/2013​</td>]

I've tried binations of the parent, child, find and closest selectors, but haven't been able to stumble across the correct one to grab the date values from the current row. Thanks.

Table

<table id="tblStatements" class="table">
            <thead>
                <tr>
                    <th>Period Starting</th>
                    <th>Period Ending</th>
                    <th>Download</th>
                </tr>
            </thead>
            <tbody>

<tr>
  <td id='period-start'>5/1/2013</td>
  <td id='period-end'>5/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td id='period-start'>4/1/2013</td>
  <td id='period-end'>4/30/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td id='period-start'>3/1/2013</td>
  <td id='period-end'>3/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

</tbody>
</table>

• javascript
• jquery
• web

• 4 Don't give same IDs on each TD, this is not a good practice – Dhaval Marthak Commented Jun 26, 2013 at 9:29
• 3 In fact that is invalid HTML. An ID must be unique. If you want to attach the same behavior to different elements, use classes. – Erik Schierboom Commented Jun 26, 2013 at 9:30

5 Answers 5

ID's are always supposed to be unique in HTML. So, you might try out this, w/o using an ID:

// Get the first td
var periodStart = $(this).closest('tr').children('td:eq(0)').text();  

// Get the second td
var periodEnd = $(this).closest('tr').children('td:eq(1)').text();  

FIDDLE DEMO

Use this - don't use duplicate ID's though, use class instead

$(this).closest('tr').find('#period-start');

or -

$(this).closest('td').siblings('#period-start');

try this

 $(this).parent().siblings('#period-start');

Make sure all your ids is unique..your HTML is invalid.... change it to class and try this

  $(this).parent().siblings('.period-start');

You should not use more then one element with the same id use class insidead.

<tr>
  <td class='period-start'>5/1/2013</td>
  <td class='period-end'>5/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td class='period-start'>4/1/2013</td>
  <td class='period-end'>4/30/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

<tr>
  <td class='period-start'>3/1/2013</td>
  <td class='period-end'>3/31/2013</td>
  <td><button type='submit'>Download</button></td>
</tr>

and use this code to select proper element

$(this).parents('tr').find('.period-start');

try this

$.trim($(this).closest('tr').find('[id="period-start"]').html());//this gives start date