Question

我有一个如下表格，点击编辑按钮后我想从td ID中读取它的行值

<table>
    <tr>
      <td id="Name">111</td>
      <td id="surname">aaaa</td>
      <td><input type="button" id="edit" value="edit"/></td>
    </tr>
    <tr>
      <td id="Name">123</td>
      <td id="surname"></td>vvv
      <td><input type="button" id="edit" value="edit"/></td>
    </tr>
    <tr>
      <td id="Name">122</td>
      <td id="surname">vvvvv</td>
      <td><input type="button" id="edit" value="edit"/></td>    
    </tr>
</table>

Answer 1

试

JS

$(document).ready(function(){   
    $('input[type=button]').click ( function () {
        var fName = $(this).parents("tr").find("td.Name").html();
        var surName = $(this).parents("tr").find("td.surName").html();
        alert('\nName:'+fName +' surName:'+surName +'\n');
});

修订HTML：

<table border=1 cellpadding=5>
    <tr>
        <td class="Name">111</td>
        <td class="surName">aaaa</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surName">vvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surName">vvvvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>

DeMO

Answer 2

您的标记存在一些问题。首先，Ids应该始终是唯一的。如果你想在多个元素中应用一个通用名称，那么一个类就更好了。你似乎也错过了一些表行。假设这已得到纠正，您应该能够以多种方式访问所需的值：

<table> 
    <tr>
        <td class="Name">111</td>
        <td class="surname">aaaa</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td> 
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surname">vvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surname">vvvvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
</table>

假设这是标记：

$('.edit').click(function() {
    var idVal = $(this).parent().siblings('.Name').html();
    alert(idVal);
});

或

$('.edit').click(function() {
    var idVal = $(this).closest('tr').find('td:first').html();
    alert(idVal);
});

使用范围

$('.edit').click(function() {
    var idVal = $('.Name', $(this).closest('tr')).html();
    alert(idVal);
});

等...

Answer 3

首先存在相当多的小错误错误（第7个td缺少一个开始标记）。另外一个id应该只使用一次，你不能/不应该有id ='name'x3，或者id ='surname'x3。

修复后，您可以使用以下jquery来获取ID：

$("#surname").html(); // where surname is the id

Answer 4

名称示例：

$('input:button')
 .click(function(){alert($(this).closest('tr').find('td[id="Name"]').text());});

（假设您忘记了代码中的某些行）

但由于ID必须是唯一的，因此您最好删除ID并尝试使用td的索引：

$('input:button')
 .click(function(){alert($(this).closest('tr').find('td:eq(1)').text());});

（例如，这将找到第二个<td>，其ID实际上是“姓”）

从表中的td ID读取值

4 个答案:

JS

修订HTML：

DeMO