Question

当有人点击我表格中的“下载”按钮时，我想将该特定行的日期值传递给一个函数。目前我只能传递第一个表格行的日期值。

这是我正在使用的选择器：

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

总是会返回：

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

我尝试了父，子，查找和最近选择器的组合，但是无法偶然发现正确的选择器从当前行中获取日期值。感谢。

表格

<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>

Answer 1

ID 在HTML中始终应为唯一。所以，你可以试试这个，没有使用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

Answer 2

使用此 - 不要使用重复的ID，而是使用类

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

或 -

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

Answer 3

试试这个

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

确保您的所有ID都是唯一的..您的HTML无效....将其更改为类并尝试此

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

Answer 4

你不应该使用多个具有相同id使用类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>

并使用此代码选择适当的元素

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

Answer 5

试试这个

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

jQuery - 选择当前表行值

5 个答案: