如何只返回表中的第一个元素？（JavaScript）

Question

我使用以下代码来获取选择的表行的信息，如何访问第一个元素（在本例中为 2）并将其分配给变量？$(document).ready(function(){$("#usersTable tr").click(function(){    $(this).find("td").each(function(){        console.log($(this).html());    });  });})它在控制台中返回以下内容HTML 代码：<table id="usersTable"> <div id="div2"> <tbody id="tableBody"> <tr id="tableHeadings">     <th>User ID</th>     <th>Email</th>     <th>Forename</th>     <th>Surname</th>     <th>Avatar</th> </tr> <tr id="row0">     <td id="id0" title="User ID Number"></td>     <td id="email0" title="User Email"></td>     <td id="forename0" title="User Forename"></td>     <td id="surname0" title="User Surname"></td>     <td>         <img id="image0"  title="User Image">     </td> </tr></tbody></div></table>

Answer 1

您可以使用函数index的参数each。 https://api.jquery.com/each/

$(document).ready(function(){

$("#usersTable tr").click(function(){

    $(this).find("td").each(function(index){

        if (index === 0) {

           console.log($(this).html());

         }

    });

  });

})

如果您不需要其他td元素，请不要循环！最好使用下面这个解决方案。

Answer 2

您可以使用这样的选择器，这样您就不必循环选定行的所有单元格

$(document).ready(function() {

  $("#usersTable tr").click(function() {

    console.log($(this).find("td:first-child").html());

  });

});

Answer 3

我已经重构了您的 HTML 结构并更新了 javascript 代码。

$(document).ready(function() {

  $('tbody tr').on('click', function() {

    let firstTd = $(this).find('td:first-child');

    let userId = firstTd.text();

    console.log(userId);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="usersTable">

  <div id="div2">

     <thead>

       <tr id="tableHeadings">

         <th>User ID</th>

         <th>Email</th>

         <th>Forename</th>

         <th>Surname</th>

         <th>Avatar</th>

       </tr>

     </thead>

     <tbody id="tableBody">

       <tr id="row0">

           <td id="id0" title="User ID Number">2</td>

           <td id="email0" title="User Email">[e-mail]</td>

           <td id="forename0" title="User Forename">demo</td>

           <td id="surname0" title="User Surname">doe</td>

           <td>img</td>

       </tr>

    </tbody>

  </div>

</table>