クラスを使用して要素の4番目の子の入力を取得する方法は？

Question

<tr class='abc'> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td> 
     <input></input> 
    </td> 
    <td></td> 
</tr> 

私はtrの4番目の子供の入力をクリックすると、何か警告したい、 私は何ができますか？

Answer 1

nth:childセレクタを使用してください。

セレクタは、そのnumeric position子供のシリーズのパターン+ Bに一致child elementsの数と一致します。

.abc td:nth-child(4) input =>親.abc要素の4th td childからinput要素を選択します。

var elems = document.querySelectorAll('.abc td:nth-child(4) input'); 
 
[].forEach.call(elems, function(elem) { //To iterate selected elements! 
 
    elem.addEventListener('click', function() { 
 
    console.log('Clicked'); 
 
    }); 
 
});

<table> 
 
    <tr class='abc'> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td> 
 
     <input>And some text(Not clickable) 
 
    </td> 
 
    <td>Five</td> 
 
    </tr> 
 
    <tr class='abc'> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    <td>Three</td> 
 
    <td> 
 
     <input>And some text(Not clickable) 
 
    </td> 
 
    <td>Five</td> 
 
    </tr> 
 
</table>

注：コメントで述べたように、私はjQueryのを使用することを好むBrowser compatibility

Answer 2

を検討してください。あなたはjQueryのを使用できる場合

$("tr.abc").on("click", "td:eq(3) input", function(){ 
    console.log("click the fourth td") 
}) 

Answer 3

、あなたはnth-child()セレクタを使用して試すことができます。

構文：

$('.className element:nth-child(x)').whatever()... 

あなたの場合：

$('tr.abc td:nth-child(4)').whatever()... 

Answer 4

$("tr li:nth-child(4)")はjqueryののドキュメントTOT行ってくださいより多くの助けのための答えだろう。 https://api.jquery.com/nth-child-selector/ この回答をお寄せください。

Answer 5

私はあなたのクラスが一つだけなので、私はあなたが第四子がそうあなたのinputは一つだけインデックス0

var g = document.getElementsByClassName("abc")[0];   
g.children[3].children[0].onclick = function(){ 
     alert('clicked'); 
} 

などがあり、その後、インデックス3つのJSアレイ標準で呼び出したい0 index.Andで呼び出しを持っていると仮定あなたの要素が複数の場合は、forループを繰り返すことができます...