JScript - 包含 table 列的数组

Question

我有以下代码可以从我的 table 中获取 headers，但经过一番搜索后，我没有找到一种明确的方法来为列执行此操作。有人可以帮我做一个类似的功能来从我的 table 中提取列吗？（没有 header）。提前谢谢大家

我的 headers 代码：

var header = [];
$('.theader ').each(function(index, item) {
    header[index] = $(item).html();
});

Answer 1

你可以用原版做这样的事情javascript

let columnData = Array.from(table.rows).
                 slice(1, table.rows.length).
                 map(row =>Array.from(row.cells).map(x => x.innerText)).
                 reduce((acc,rowData)=>{
                   rowData.forEach((value,index)=>{
                   acc[index]= acc[index] || [ ]
                   acc[index].push(value)
                 }) 
                 return acc },[])

let table = document.getElementById('tab')
debugger
let headers = Array.from(table.rows[0].cells).map(x => x.innerText)
let columnData = 
Array.from(table.rows).
      slice(1, table.rows.length).
      map(row =>Array.from(row.cells).map(x => x.innerText))
     .reduce((acc,rowData)=>{
           rowData.forEach((value,index)=>{
           acc[index]= acc[index] || [ ]
           acc[index].push(value) })
      return acc },[])
console.log(headers)
console.log(columnData)

<table id="tab">
  <tr>
    <th>
      Name
    </th>
    <th>
      Age
    </th>
    <th>
      Location
    </th>
  </tr>

  <tr>
    <th>
      Jason
    </th>
    <th>
      22
    </th>
    <th>
      Texas
    </th>
  </tr>
  <tr>
    <th>
      Lawson
    </th>
    <th>
      21
    </th>
    <th>
      Florida
    </th>
  </tr>
  <tr>
    <th>
      Jose
    </th>
    <th>
      25
    </th>
    <th>
      London
    </th>
  </tr>

</table>

Answer 2

请看下面的例子

var columns = [];
var table = $("table tbody");
table.find('tr').each(function (key, val) {
  $(this).find('td').each(function (key, val) {
    if (columns[$("th:eq(" + key + ")").text().trim()] == undefined) {
      columns[$("th:eq(" + key + ")").text().trim()] = [];
    }
    columns[$("th:eq(" + key + ")").text().trim()].push($(val).text().trim());
  });
});
console.log(columns);

<!DOCTYPE html>
<html>

<head>
  <title>A test</title>
  <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
</head>

<body>
  <table border="1">
    <thead>
      <tr>
        <th>
          Id
        </th>
        <th>
          Name
        </th>
        <th>
          Price
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>63</td>
        <td>Computer</td>
        <td>3434</td>
      </tr>
      <tr>
        <td>64</td>
        <td>test1</td>
        <td>111</td>
      </tr>
      <tr>
        <td>64</td>
        <td>test2</td>
        <td>11</td>
      </tr>
    </tbody>
  </table>
</body>
<html>

JScript - 包含 table 列的数组

JScript - Array with columns from table

javascript

html-table

tablecolumn