選擇使用jQuery

特定元素如何選擇一個td內的輸入？這裏是我的tr：選擇使用jQuery

<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返回空。

來源

2016-02-17 Trung Tran

'this'指?????????? –

只是'最接近（ 'TR輸入'）。EQ（INDEX）' – Rayon

您需要使用'VAL（）''不HTML（）' –

有在你的代碼的兩個問題。

<input>元素沒有的innerHTML，您可以使用val()得到一個輸入的值。
要選擇的第n個元素<td>，則需要在td元素上，而不是在<input>使用eq(index)。

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

來源

2016-02-17 04:50:25 Tushar

^1的代碼結構。 –

的輸入是不等同於使用當量（0），當量（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.

我不能確定，如果因爲你沒有指定的this的背景下closeset('td')將工作或沒有。您仍然可以使用$(this).closest('tr').find('td').eq(...)。

來源

2016-02-17 04:51:13

<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="[email protected]"> 
    </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>

來源

2016-02-17 05:32:33 Aswathy

選擇使用jQuery

回答

相關問題