如何获取单个表格行日期索引属性索引，以便我可以提取其单元格的值？

Posted 2023-05-08

【中文标题】如何获取单个表格行日期索引属性索引，以便我可以提取其单元格的值？

【英文标题】：How to get individual table row date-index attribute indices so I can pull the value of its cells?

【发布时间】：2021-10-30 02:47:42

【问题描述】：

我正在使用 Bootstrap Table 集成来创建一个包含来自我的 ajax 获取请求的数据的表。 表格插件根据您的数据动态生成带有<tr> 和<td> 的<tbody>。我需要能够获取各个 <tr> 及其各自的 <td> 值，以便在另一个 ajax 调用中使用。

<table id="table>
<tbody>
   <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
   </tr>
   <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
   </tr>
   <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
   </tr>
   <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
   </tr>
   <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
   </tr>
   <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
   </tr>
</tbody>
</table>

我目前有这个点击事件。

let data = []

$("#table").on("click", function (id) 
    
        const $ths = $(this).find("tr")
        $.each($ths, function () 
            data.push($(this).text().trim())
        )
        console.log(data)
    )

现在这将获得所有<td> 值，就像这样。

[
    "ACB",
    "1540",
    "0784",
    "E",
    "ACB",
    "1559",
    "0784",
    "E",
    "ACB",
    "2095",
    "0784",
    "A",
    "ADH",
    "1075",
    "0347",
    "E",
    "ADH",
    "0001",
    "0347",
    "S",
    "ADH",
    "0001",
    "0347",
    "A",
    "ADH",
    "1076",
    "0347",
    "E",
    "AHG",
    "2135",
    "0657",
    "W",
    "AHG",
    "1037",
    "0657",
    "E",
    "AHG",
    "2101",
    "0657",
    "A"
]

我只需要获取一个<tr> 值并将它们单独推送到数据数组中，如下例所示。如何从 <tr> 上的 data-index 属性获取索引以获取单个数据并将其推送到数据数组中？非常感谢任何建议！

[
    "ACB",
    "1540",
    "0784",
    "E"
]
[
    "ACB",
    "1559",
    "0784",
    "E"
]
[
    "ACB",
    "2095",
    "0784",
    "A"
]
[
    "ADH",
    "1075",
    "0347",
    "E"
]
[
    "ADH",
    "0001",
    "0347",
    "S"
]

【问题讨论】：

这能回答你的问题吗？ How to tell which row number is clicked in a table?

【参考方案1】：

你可以循环每个tr的内部td元素：

let data = []

const $ths = $("#table").find("tr");
$.each($ths, function () 
    const innerData = [];
    $(this).find("td").each(function () 
      innerData.push($(this).text().trim());
    );
    data.push(innerData);
)
console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
   <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
   </tr>
   <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
   </tr>
   <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
   </tr>
   <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
   </tr>
   <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
   </tr>
   <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
   </tr>
</tbody>
</table>

【讨论】：

每当点击一行时，这仍然会立即将所有

数据推送到数组中。我需要它只推送被点击的单个行中的数据。

【参考方案2】：

您的意思是 - 每个 TR 点击的单元格

$("#table tbody tr").on("click", function() 
  const data = $('td',this).map(function()  
      return $(this).text().trim();
  ).get()
  console.log(data)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>

或者这个 - 获取整个表格的每个 TR 的所有单元格

const data = []
$("#table").on("click", function() 
  $('tr',this).each(function()  
      data.push($(this).find("td").map(function() return $(this).text().trim() ).get());
  )
  console.log(data)
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>