javascript - 如何使用类获取元素的第四个子元素的输入？

Question

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

我想当我点击 tr 的第四个子元素的输入时，发出警报， 我能做什么？

Answer 1

使用nth:child选择器。

The selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.

.abc td:nth-child(4) input => 从 第 4 个 td 中选择一个 input 元素父 .abc 元素的子 元素。

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>

注意:如评论中所述，请考虑 Browser compatibility