javascript - 在 JavaScript 中使用重复的第一个子元素检索嵌套 id

Question

我正在编写一个动态创建和命名表元素的 Web 应用程序，我需要检索和解析完全嵌套的 id(而不是值)。结构(以及我的最新尝试)是这样的:

<table>
      <tr onclick="alert(this.firstChild.firstChild.firstChild.id);">
         <td>
            <div>
                <input type="text" id="thisIsTheNeededID">
            </div>
         </td>
      </tr>
 </table>

它不断返回“未定义”，这证实了我的怀疑:我对 JavaScript 的了解不够深入。我也在使用 jQuery，所以这些解决方案可以工作。

Answer 1

如果您需要确切的:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr onclick="alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));">
    <td>
      <div>
        <input type="text" id="thisIsTheNeededID">
      </div>
    </td>
  </tr>
</table>

这是一个内联 JavaScript，最好通过委派事件来使用不显眼的 JavaScript，并使代码和演示文稿分开，这样会更清晰。下面是一段不引人注目的 JavaScript 代码。

$(function () {
  $("table").on("click", "tr", function () {
    alert($(this).find('td:first-child').find('div:first-child').find('input:first-child').attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>
        <input type="text" id="thisIsTheNeededID">
      </div>
    </td>
  </tr>
</table>

您无需继续为每个 <tr> 添加代码.