使用类名将 HTML 表转换为 javascript 数组

Question

如何使用标签的类名作为数组值将 HTML 表转换为 javascript 数组？ 假设我们有以下 HTML 代码：

    <table class="grid">
      <tr>
        <td class="available"></td>
        <td class="busy"></td>
        <td class="busy"></td>
        <td class="available"></td>
      </tr>
      <tr>
        <td class="busy"></td>
        <td class="available"></td>
        <td class="busy"></td>
        <td class="available"></td>
      </tr>
    </table>

我希望数组看起来像：[["available","busy","busy","available"],["busy","available","busy","available"]]

我尝试了以下方法：

    var myTableArray = [];
    $("table#grid tr").each(function() { 
        var arrayOfThisRow = [];
        var tableData = $(this).find('td');
        if (tableData.length > 0) {
            tableData.each(function() { arrayOfThisRow.push($(this).text()); });
            myTableArray.push(arrayOfThisRow);
        }
    });
    console.log(myTableArray);

但它正在打印一个空数组，因为 td 标签不包含文本。然后我尝试替换

    $(this).text()

与

    $(this).className()

但这没有用。有什么建议吗？

Answer 1

map 是要走的路。

jQuery 的 $.map 有点奇怪，因为它似乎认为 it's ok to flatten mapped arrays without asking and we're not going to fix it 所以你必须将映射的数组放在一个数组中。

// Cache the rows
const rows = $('.grid tr');

// `map` over each row...
const arr = $.map(rows, row => {

  // Find the row cells...
  const cells = $(row).find('td');
  
  // ...and return an array of each cell's text
  return [$.map(cells, cell => $(cell).text())];

});

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="grid">
  <tr>
    <td class="available">available</td>
    <td class="busy">busy</td>
    <td class="busy">busy</td>
    <td class="available">available</td>
  </tr>
  <tr>
    <td class="busy">busy</td>
    <td class="available">available</td>
    <td class="busy">busy</td>
    <td class="available">available</td>
  </tr>
</table>

或者，如果您想要一个普通的 JS 解决方案，您可以使用 querySelectorAll 获取行，然后使用 map 遍历它们，然后从单元格返回文本（假设您修复了 HTML） .

（注意：[...nodelist] 是从节点列表创建数组的简写，以便map 可以工作。您也可以使用Array.from(nodelist)）。

// Cache the rows
const rows = document.querySelectorAll('.grid tr');

// `map` over each row...
const arr = [...rows].map(row => {

  // Find the row cells...
  const cells = row.querySelectorAll('td');

  // ...and return an array of each cell's text
  return [...cells].map(cell => cell.textContent);
});

console.log(arr);

<table class="grid">
  <tr>
    <td class="available">available</td>
    <td class="busy">busy</td>
    <td class="busy">busy</td>
    <td class="available">available</td>
  </tr>
  <tr>
    <td class="busy">busy</td>
    <td class="available">available</td>
    <td class="busy">busy</td>
    <td class="available">available</td>
  </tr>
</table>

Answer 2

原版 JS 解决方案

1. 使用<tr> 获取和制作数组
2. 映射每个<tr> 并使用<td> 元素创建数组
3. 仅映射来自每个 <td> 的类名

该示例将从 CLASS 元素名称返回 ARRAY。

示例：

var res = [...document.querySelectorAll('.grid tr')] // 1. Get and Make array with <tr>
    .map((el) => [...el.children] // 2. Map every <tr> and make array with <td> elements
    .map(e => e.getAttribute('class'))); // 3. Map only class names from every <td>

console.log(res);

<table class="grid">
    <tr>
        <td class="available"></td>
        <td class="busy"></td>
        <td class="busy"></td>
        <td class="available"></td>
    </tr>
    <tr>
        <td class="busy"></td>
        <td class="available"></td>
        <td class="busy"></td>
        <td class="available"></td>
    </tr>
</table>

此示例将从表格的文本内容中生成 ARRAY。

示例：

var res = [...document.querySelectorAll('.grid tr')] // 1. Get and Make array with <tr>
    .map((el) => [...el.children] // 2. Map every <tr> and make array with <td> elements
    .map(e => e.innerText));      // 3. Map only text content from every <td>

console.log(res);

<table class="grid">
    <tr>
        <td>available</td>
        <td>busy</td>
        <td>busy</td>
        <td>available</td>
    </tr>
    <tr>
        <td>busy</td>
        <td>available</td>
        <td>busy</td>
        <td>available</td>
    </tr>
</table>