Question

我有一张桌子如下图所示。点击编辑后我想得到第一个TD的值，即日期，我怎么能这样做，即使是第二行呢？

    <table id="foo" border="1px">
<tr> 
                    <td rowspan='3' id="date"> 
                     Monday5                   </td> 
                    <td id="Name"> 
                     Jim 
                    <a href="#" class="edit"> 
                      edit 
                     </a> 

                    </td> 
  </tr> 

   <tr> 
                    <td id="Name"> 
                      Remy 
                    <a href="#" class="edit"> 
                      edit</a> 
                    </td> 
  </tr> 


</table>

enter image description here

Answer 1

如果我说得对，那么你可以在这里做到这一点

$('a').click(function(e) {
    e.preventDefault;
    var tr = $(this).parents('tr').eq(0);
    while (tr && !tr.find('td:first[rowspan]').length > 0) {
        tr = tr.prev();
    }
    alert(tr.find('td:first').text());
})

关于jsfiddle的一个例子：http://jsfiddle.net/yUpTV/1/

Answer 2

首先，您应修复html代码，因为id属性是唯一的。我建议你使用class属性：

<table id="foo" border="1">
    <tr> 
        <td rowspan="3" class="date">Monday</td> 
        <td>Cell A1 <a href="#" class="edit">edit</a></td> 
    </tr>
    <tr> 
        <td>Cell A2 <a href="#" class="edit">edit</a></td> 
    </tr>
    <tr> 
        <td>Cell A3 <a href="#" class="edit">edit</a></td> 
    </tr>
    <tr> 
        <td rowspan="3" class="date">Tuesday</td> 
        <td>Cell B1 <a href="#" class="edit">edit</a></td> 
    </tr>
    <tr> 
        <td>Cell B2 <a href="#" class="edit">edit</a></td> 
    </tr>
    <tr> 
        <td>Cell B3 <a href="#" class="edit">edit</a></td> 
    </tr>
</table>

在javascript代码中，我首先检查当前行中是否有日期，如果没有，请获取第一个上一个。包含日期的行：

$("#foo a.edit").click(function(e){

    var tr = $(this).closest("tr"),
        date = tr.find("td.date");
    if (date.length == 0) {
        date = tr.prevAll(":has(td.date):first").find("td.date");
    }

    e.preventDefault();
    alert(date.html());
});

在http://jsfiddle.net/roberkules/WwZPY/

上查看有效的演示

旁注：我注意到你为类使用了大写和小写的名字。我建议更加一致，并将它们命名为大写或小写。和css类区分大小写，因此为了消除另一个错误源，请保持一致。

Answer 3

感谢-1 :)这个应该正常工作。

$(".edit").click(function(e){

    var parent_tr = $(this).parents("tr:first");
    var child_rowspan = parent_tr.find("td[rowspan]");


    if (child_rowspan.length == 0) {
        name = parent_tr.prevAll("tr:has(td[rowspan]):first").find("td[rowspan]").text();

    } else {
        name = child_rowspan.text()
    }

    alert(name);
});

Answer 4

试试这个：

$(this).parents("tr").children("td:first").text()

Answer 5

由于元素已经被识别，你可以像这样访问它

$("#date").text();

从行跨读取第一列值

5 个答案: