Question

如何在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时，这将返回空白。

Answer 1

您的代码中存在两个问题。

<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

Answer 2

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

你应该这样做：

hello'

我不确定$(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。

Answer 3

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

使用jQuery在特定元素中选择<input />

3 个答案: