获取单行id方法大全（包含原生Js获取、jQuery获取、Vue.js获取...）_js如果取得被选中行的id-程序员宅基地

一、原生 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>

第三种：

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

$('#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/[email protected]/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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp