使用 jQuery 在特定 <td> 元素中选择 <input>答案

【问题标题】：Select <input> in a specific <td> element using jQuery使用 jQuery 在特定 <td> 元素中选择 <input>
【发布时间】：2016-05-28 15:40:24
【问题描述】：

如何在td 中选择输入？这是我的tr：

<tr>
    <td>
        <input type="text" class="form-control" name="first_name" placeholder="First Name">
    </td>
    <td>
        <input type="text" class="form-control" name="last_name" placeholder="Last Name">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_email" placeholder="Email">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_phone_num" placeholder="Phone #">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_notes" placeholder="Notes">
    </td>
    <td>
        <button type="" class="btn btn-success add_contact">Add Contact</button>
    </td>
</tr>

我的 JavaScript：

var context = {
    first_name: $(this).closest('tr').find('input').eq(0).html(),
    last_name: $(this).closest('tr').find('input').eq(1).html(),
    contact_email: $(this).closest('tr').find('input').eq(2).html(),
    contact_phone_num: $(this).closest('tr').find('input').eq(3).html(),
    contact_notes: $(this).closest('tr').find('input').eq(4).html()
};

当我登录 context 时返回空。

【问题讨论】：

this 指的是??????????
就closest('tr input').eq(INDEX)
你需要使用val() 而不是html()

标签： javascript jquery html html-table

【解决方案1】：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        $('.add_contact').click(function () {

            var context = {
                first_name: $(this).closest('tr').find('td:eq(0)').find('input').val(),
                last_name: $(this).closest('tr').find('td:eq(1)').find('input').val(),
                contact_email: $(this).closest('tr').find('td:eq(2)').find('input').val(),
                contact_phone_num: $(this).closest('tr').find('td:eq(3)').find('input').val(),
                contact_notes: $(this).closest('tr').find('td:eq(4)').find('input').val()
            };


        });
    });
</script>
</head>

<body>
   <table>
       <tbody>

           <tr>
    <td>
        <input type="text" class="form-control" name="first_name" placeholder="First Name" value="Chikku">
    </td>
    <td>
        <input type="text" class="form-control" name="last_name" placeholder="Last Name" value="Ferna">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_email" placeholder="Email" value="chikku@gmail.com">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_phone_num" placeholder="Phone #" value="2423424">
    </td>
    <td>
        <input type="text" class="form-control" name="contact_notes" placeholder="Notes" value="sample">
    </td>
    <td>
        <button type="" class="btn btn-success add_contact">Add Contact</button>
    </td>
</tr>



       </tbody>
   </table>

</html>

【讨论】：

【解决方案2】：

你的代码有两个问题。

<input> 元素没有 innerHTML，您可以使用 val() 获取输入的值。
要选择第 n 个<td> 元素，您需要在td 元素上使用eq(index)，而不是在<input> 上使用。

假设this 指的是<tr> 中的任何元素。

$(this).closest('tr').find('input').eq(0).html()

应该是

$(this).closest('tr').find('td').eq(0).find('input').val()
                     ^^^^^^^^^^^^^^^^^                    : Get the 0 index `td`
                                       ^^^^^^^^^^^^^      : select input inside it
                                                     ^^^^ : Get the value of input

【讨论】：

【解决方案3】：

输入不等同于使用 eq(0)、eq(1) 等，因为所有输入都是 td 元素内的第一个子元素。

你应该这样做：

$(this).closest('td').eq(0).find('input').val();
$(this).closest('td').eq(1).find('input').val();
$(this).closest('td').eq(2) //first find nth element from td
  .find('input').val()//then find its input & get the value.

我不确定closeset('td') 是否有效，因为您没有指定this 的上下文。你仍然可以使用$(this).closest('tr').find('td').eq(...)。

【讨论】：