JScript - 包含表中列的数组答案

【问题标题】：JScript - Array with columns from tableJScript - 包含表中列的数组
【发布时间】：2020-09-05 23:50:33
【问题描述】：

我有以下代码可以从我的表中获取标题，但经过一些搜索后，我没有找到一种明确的方法来处理列。有人可以帮我做一个类似的功能来从我的表中提取列吗？（没有标题）。先谢谢各位了

我的标题代码：

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

【问题讨论】：

你想精确迭代什么？每个 td 项目？请显示您当前拥有的 HTML。
@PabloCG 我有一个表，我想创建一个包含一列中所有值的数组，例如第一个列

标签： javascript html-table tablecolumn

【解决方案1】：

你可以使用 vanilla 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>

【讨论】：

我试过了，但不是垂直的列...
是的，我误解了这个问题

【解决方案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>

【讨论】：

你检查过这个吗？