首页 前端知识 获取单行id方法大全(包含原生Js获取、jQuery获取、Vue.js获取...)

获取单行id方法大全(包含原生Js获取、jQuery获取、Vue.js获取...)

2024-06-05 13:06:06 前端知识 前端哥 428 531 我要收藏

一、原生 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/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://www.qianduange.cn//article/10853.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!