选择 <input> 具体而言 <td> 使用jQuery的元素

Question

How can I select an input within a td ? 如何在td选择输入？ Here is my tr : 这是我的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>

My JavaScript: 我的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()
};

This returns empty when I log context . 当我记录context时，它返回空。

Answer 1

There are two problems in your code. 您的代码中存在两个问题。

<input> elements don't have innerHTML, you can use val() to get the value of an input. <input>元素没有innerHTML，您可以使用val()来获取输入的值。
To select the nth <td> element, you need to use eq(index) on the td element and not on the <input> . 要选择第n个<td>元素，需要在td元素上使用eq(index)而不是在<input> 。

Assuming this refers to the any element inside <tr> . 假设this指的是<tr>的任何元素。

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

should be 应该

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

The inputs are not equivalent to use eq(0), eq(1), etc. because all inputs are the first-child elements inside the td elements. 输入不等于使用eq（0），eq（1）等，因为所有输入都是td元素内的first-child元素。

You should be doing like this: 你应该这样做：

$(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.

I am unsure if the closeset('td') would work or not because you didn't specified the the context of this . 我不确定如果closeset('td')因为你没有指定的情况下将工作或没有this 。 You may still use $(this).closest('tr').find('td').eq(...) . 你仍然可以使用$(this).closest('tr').find('td').eq(...) 。

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>

选择 <input> 具体而言 <td> 使用jQuery的元素

问题描述

3 个解决方案

解决方案1
7 已采纳 2016-02-17 04:50:25

解决方案2
0 2016-02-17 04:51:13

解决方案3
0 2016-02-17 05:32:33

选择 <input> 具体而言 <td> 使用jQuery的元素

问题描述

3 个解决方案

解决方案1 7 已采纳 2016-02-17 04:50:25

解决方案2 0 2016-02-17 04:51:13

解决方案3 0 2016-02-17 05:32:33

解决方案1
7 已采纳 2016-02-17 04:50:25

解决方案2
0 2016-02-17 04:51:13

解决方案3
0 2016-02-17 05:32:33