获取单行id方法大全（包含原生Js获取、jQuery获取、Vue.js获取…）

本文介绍: 以上是使用原生 Ja vaScri p t、jQue ry 和 Vue.js 的三种方法，根据你的实际情况选择适合的方法来获取每行的ID值

// 获取表格对象
var table = document.getElementById('myTable');
// 获取所有行
var rows = table.getElementsByTagName('tr');
// 遍历每一行，获取ID值
for (var i = 0; i &lt; rows.length; i++) {
  var row = rows[i];
  // 获取ID单元格
  var idCell = row.cells[0]; // 假设ID在第一列
  // 获取ID值
  var id = idCell.innerText || idCell.textContent;
  // 使用ID值进行后续操作
  console.log(id);
}

解析：这个例子使用getElementById获取表格对象，然后使用getElementsByTa gName获取所有的行，随后通过遍历行来获取每行的ID值。

&lt;!DOCTYPE html&gt;
<html>
<body>

<table id="myTable">
  <tr>
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Bob</td>
    <td>Johnson</td>
  </tr>
</table>

<script>
  // 使用原生 JavaScript 获取表格行的 ID 值
  var table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  
  for (var i = 0; i < rows.length; i++) {
    var id = rows[i].id;
    console.log("Row " + (i + 1) + " ID: " + id);
  }
</script>

</body>
</html>

通过 getElementById 获取表格元素，然后使用 getElementsByTagName 获取所有的行元素，再通过遍历进行操作。

const table = document.getElementById('myTable');
const rows = table.getElementsByTagName('tr');

for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  const id = row.getAttribute('id');
  // 在这里进行对 ID 值的处理
}

// 获取每行的ID值
$('#myTable tr').each(function() {
  var id = $(this).find('td:first').text(); // 假设ID在第一列
  // 使用ID值进行后续操作
  console.log(id);
});

这个例子使用each方法遍历每一行，在每行内使用find方法找到第一个td元素（假设ID在第一列），并通过text方法获取其中的文本。

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<table id="myTable">
  <tr id="row1">
    <td>1</td>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr id="row2">
    <td>2</td>
    <td>Jane</td>
    <td>Smith</td>
  </tr>
  <tr id="row3">
    <td>3</td>
    <td>Bob</td>
    <td>Johnson</td>
  </tr>
</table>

<script>
  // 使用 jQuery 获取表格行的 ID 值
  $("#myTable tr").each(function() {
    var id = $(this).attr("id");
    console.log("Row ID: " + id);
  });
</script>

</body>
</html>

通过选择器选择表格元素，然后使用 each 方法进行遍历

$('#myTable tr').each(function() {
  const id = $(this).attr('id');
  // 在这里进行对 ID 值的处理
});

<table id="myTable">
  <tr v-for="row in tableData" :key="row.id">
    <td>{{ row.id }}</td>
    <!-- 其他列 -->
  </tr>
</table>

// 在 Vue 实例中获取每行的ID值
data: {
  tableData: [
    { id: 1, /* 其他数据 */ },
    { id: 2, /* 其他数据 */ },
    // 其他行数据
  ]
},
mounted() {
  // 遍历 tableData 数组，获取每行的ID值
  this.tableData.forEach(function(row) {
    var id = row.id;
    // 使用ID值进行后续操作
    console.log(id);
  });
},

这个例子使用v-for指令在模板中循环渲染每一行数据，然后通过遍历ta bleData数组来获取每行的ID值。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>

<div id="app">
  <table>
    <tr v-for="(row, index) in rows" :key="index" :id="'row' + (index + 1)">
      <td>{{ row.id }}</td>
      <td>{{ row.firstName }}</td>
      <td>{{ row.lastName }}</td>
    </tr>
  </table>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      rows: [
        { id: 1, firstName: "John", lastName: "Doe" },
        { id: 2, firstName: "Jane", lastName: "Smith" },
        { id: 3, firstName: "Bob", lastName: "Johnson" }
      ]
    },
    mounted() {
      // 使用 Vue.js 获取表格行的 ID 值
      var rows = document.querySelectorAll("table tr");
      
      rows.forEach(function(row) {
        var id = row.id;
        console.log("Row ID: " + id);
      });
    }
  });
</script>

</body>
</html>

在 Vue 组件中，使用 v-for 指令遍历表格行，并通过 :key 属性指定唯一的 key 值

<table>
  <tr v-for="item in items" :key="item.id">
    <td>{{ item.id }}</td>
    <!-- 其他列 -->
  </tr>
</table>

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

id var 获取

一、原生 Ja vaScri p t 获取 表格行的 ID 值：

第一种：

第二种：

第三种：

二、jQue ry 获取表格行的 ID 值：

第一种：

第二种：

第三种：

三、Vue.js 获取表格行的 ID 值：

第一种：

第二种：

第三种：

发表回复取消回复

一、原生 JavaScript 获取表格行的 ID 值：

第一种：

第二种：

第三种：

二、jQuery 获取表格行的 ID 值：

第一种：

第二种：

第三种：

三、Vue.js 获取表格行的 ID 值：

第一种：

第二种：

第三种：

相关文章

发表回复 取消回复

一、原生 Ja vaScri p t 获取表格行的 ID 值：

二、jQue ry 获取表格行的 ID 值：

发表回复取消回复