一、原生 JavaScript 获取表格行的 ID 值：
第一种：
// 获取表格对象
var table = document.getElementById('myTable');
// 获取所有行
var rows = table.getElementsByTagName('tr');
// 遍历每一行，获取ID值
for (var i = 0; i < 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获取表格对象，然后使用getElementsByTagName获取所有的行，随后通过遍历行来获取每行的ID值。
第二种：
<!DOCTYPE html>
<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 值的处理
}
二、jQuery 获取表格行的 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>
第三种：
$('#myTable tr').each(function() {
const id = $(this).attr('id');
// 在这里进行对 ID 值的处理
});
三、Vue.js 获取表格行的 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指令在模板中循环渲染每一行数据，然后通过遍历tableData数组来获取每行的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>
在组件的 data 中定义一个数组 items，表示表格中的数据行，每一行包含一个 id 字段。通过遍历 items 数组，可以获取每一行的 ID 值。
上述示例中，需要将 “myTable” 替换为你实际使用的表格的 ID 或选择器，并根据实际数据结构和处理逻辑进行相应调整。
有不明白的欢迎留言，随时解答！！！
原文地址:https://blog.csdn.net/YN2000609/article/details/131657082
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_44703.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
