时间戳

首页 > 解决方案 > 使用类名将 HTML 表转换为 javascript 数组

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

问题描述

如何使用标签的类名作为数组值将 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()

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

标签： javascripthtmlarrayshtml-table

解决方案

香草 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>

推荐阅读