js获取原生table选中情况下的一行的数据

你可以使用以下代码来获取选中行的数据：

// 获取 table 元素
var table = document.getElementById("myTable");

// 获取所有的行
var rows = table.getElementsByTagName("tr");

// 遍历所有的行，找到选中的行
for (var i = 0; i < rows.length; i++) {
  // 如果该行被选中
  if (rows[i].classList.contains("selected")) {
    // 获取该行的所有单元格
    var cells = rows[i].getElementsByTagName("td");

    // 遍历所有单元格，获取数据
    for (var j = 0; j < cells.length; j++) {
      var data = cells[j].innerHTML;
      console.log(data);
    }
  }
}

其中，"myTable" 是你的表格的 id，"selected" 是你自定义的选中行的 CSS 类名。你需要在表格中添加一个事件监听器，当选中行变化时，动态添加或删除该 CSS 类名来改变行的样式。

相关问题

js获取原生table选中情况的值

您可以通过以下代码获取表格的选中情况：

let table = document.getElementById("myTable"); // 获取表格元素
let selectedRows = []; // 用于存储选中行的数组
for (let i = 1; i < table.rows.length; i++) {
  if (table.rows[i].cells[0].querySelector('input[type="checkbox"]').checked) {
    selectedRows.push(table.rows[i]); // 如果该行被选中，将其添加到选中行的数组中
  }
}

其中，`myTable` 是您的表格 ID，`selectedRows` 是用于存储选中行的数组。在上述代码中，我们遍历表格的每一行，如果该行的第一个单元格中的复选框被选中，就将该行添加到选中行的数组中。最后，`selectedRows` 数组中将包含所有被选中的行。

vue 原生table 点击行获取行的数据

可以使用 Vue 的事件绑定来实现获取表格行数据的功能。具体实现步骤如下：

1. 在表格中绑定点击事件，使用 `@click` 或 `v-on:click`，并传入一个函数。例如：

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id" @click="handleRowClick(item)">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

2. 在组件中编写 `handleRowClick` 函数，接收一个参数 `row`，即当前点击的行的数据。例如：

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 25 },
        { id: 3, name: 'Bob', age: 30 },
      ],
    };
  },
  methods: {
    handleRowClick(row) {
      console.log(row); // 输出当前点击的行的数据
    },
  },
};

这样，当用户点击某一行时，就能获取到该行的数据了。