Question

好的，我有一个HTML TABLE，TR中有4个TD（两个），如下面的代码所示：

<table>
   <tr>
      <td class="1">Lemon</td>
      <td class="2">Orange</td>
      <td class="3">Tea</td>
      <td class="4"><a href=#" class="get">Get</a></td>
   </tr>

   <tr>
      <td class="1">Apple</td>
      <td class="2">Tomato</td>
      <td class="3">Pineapple</td>
      <td class="4"><a href="#" class="get">Get</a></td>
   </tr>
</table>

如何使用jQuery制作，当点击#GET时，它将获得与它在同一表格行中的1,2,3类值。

例如，我点击第一行中的#get，我会得到柠檬，橙子，茶。

我使用下面的jQuery代码，但它不起作用：

$(document).ready(function(){
 $('a#get').click(function(e){
    e.preventDefault();
    var val1 = $(this).parent().find('td.1').html();
    var val2 = $(this).parent().find('td.2').html();
    var val3 =  $(this).parent().find('td.3').html();
    alert(val1 + val2 + val3);
 });
});

关于我该怎么做或者我做错了什么的想法？

谢谢！

Answer 1

See Working Demo

您应该使用唯一的id，这里是修改后的代码：

$(document).ready(function(){
 $('a.get').click(function(e){
    e.preventDefault();
    var val1 = $(this).closest('tr').find('td.1').html();
    var val2 = $(this).closest('tr').find('td.2').html();
    var val3 =  $(this).closest('tr').find('td.3').html();
    alert(val1 + val2 + val3);
 });
});

使用parent您回到td因为链接在其中，您需要回到tr，这是通过closest('tr')完成的。此外，html已被修改为link元素具有唯一ID。

<a href=#" class="get">Get</a>

Answer 2

您在.find()元素中调用td，而实际上需要在tr中调用它，这是一个级别。

将$(this).parent().find(...)替换为$(this).parent().parent().find(...)。

（并且你应该像pimvdb建议的那样使你的ID独一无二。）

Answer 3

没有必要在单元格中添加一个类，如果它们只是数字 - 你可以使用eq()。

Here's how I'd do it:

$('#table-id tr').each(function() {
    var tds = $(this).find('td');
    $(this).find('a.get').click(function() {
        alert(tds.eq(0).html() + tds.eq(1).html() + tds.eq(2).html());
        return false;
    });
});

从表中的另一个td获取其他值

3 个答案:

See Working Demo