如何使用 jquery 获取第一个 td 值答案

【问题标题】：How to get the first td value using jquery如何使用 jquery 获取第一个 td 值
【发布时间】：2021-10-03 19:15:23
【问题描述】：

我创建了一个具有以下样式的表格。现在我想使用jQuery 将第一个 td 值设为 1,2,3。

<html>
<head>
<style type='text/css'>
table {
  counter-reset: rowNumber;
}

table tr {
  counter-increment: rowNumber;
}

table tr td:first-child::before {
  content: counter(rowNumber);
  min-width: 1em;
  margin-right: 0.5em;
}
</style>
</head>
<body>
  <table border="1" id="MyTable">
    <tr>
     <td></td> <td>blue</td>
    </tr>
    <tr>
      <td></td><td>red</td>
    </tr>
    <tr>
      <td></td><td>black</td>
    </tr>
  </table>
</body>
</html>

我尝试使用以下脚本，但它将行计数器显示为文本。如何获取第一个 td 的值？

<script>
 $("#MyTable").find('tr').each(function (i, el) {
            
            $(this).find('td:eq(0)').each(function () {
                console.log(window.getComputedStyle(this, ':before').content);
            });
        });
</script>

【问题讨论】：

你的意思是要获取每个表格行的第一个td的值吗？
是的。我想要行计数器值。
可能你想把 1,2,3 放在 DOM 上的 TD 中。你可以这样做： $("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i ); });
根据this post看来是不可能的。

标签： javascript jquery html-table

【解决方案1】：

基于this:

生成的内容不会改变文档树。特别是，它不会反馈给文档语言处理器。

因此，如果您看到生成的 html，您将看到所有 td 为空，而您在页面中看到计数器 (1,2,3)。这是生成的html：

但这是结果：

所以生成的内容不会改变文档树，您无法访问它的价值。

你可以做很多选择：

$("#MyTable").find('tr').each(function (i, el) {
    debugger
    $(this).find('td:eq(0)').each(function (index, el) {
        $(this).html(i+1)
        console.log($(this).html());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
    <tbody>
        <tr>
            <td></td>
            <td>blue</td>
        </tr>
        <tr>
            <td></td>
            <td>red</td>
        </tr>
        <tr>
            <td></td>
            <td>black</td>
        </tr>
    </tbody>
</table>

更新

您可以在每次修改后对您的桌子进行休息：

 function setnumber() {
     $('#MyTable tbody tr').each(function (i) {
         $($(this).find('td')[0]).html(i + 1);
     });
 }

 $(".delete").click(function () {
     $(this).closest('tr').remove();

     setnumber();
    
 });
 setnumber();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
    <tbody>
        <tr>
            <td></td>
            <td>blue</td>
            <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
        </tr>
        <tr>
            <td></td>
            <td>red</td>
            <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
        </tr>
        <tr>
            <td></td>
            <td>black</td>
            <td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
        </tr>
    </tbody>
</table>

【讨论】：

是的.. 但是如果我们删除表的任何一行，那么行号将不会改变。假设我删除了第二行，那么它将在第一列中显示 1 和 3。根据您的代码 sn-p，我们需要每次循环遍历行以重置第一列的值。
@Rekha 您可以为reset row number 创建函数，然后在您的表上的每个修改中调用该函数（例如 delete.insert ，..）。查看更新的答案
@Rekha 请注意，无论如何您都需要循环。想到 CSS 选择器？ CSS Selector 如何选择特定的标签？没有循环如何找到所有元素并更新行号？

【解决方案2】：

您可能希望将 1,2,3 放在 DOM 上的 TDS 中。你可以这样做：

$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });

https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js

【讨论】：

【解决方案3】：

您可以使用子选择器来选择 tr 的子项

    jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();

【讨论】：

嗨，谢谢你的回答，你能解释一下 Lil 关于这段代码吗？
jQuery 包含该元素的 CSS 选择器，并且 .text() 函数返回该元素中的文本数据。要了解更多信息，您需要了解一点关于 jQuery 的知识。这是一个非常简单的代码。