Question

我有这样的二维数组

#include <iostream>
#include <mutex>
#include <thread>
#include <chrono>
using namespace std::chrono_literals;

int main(int, char**)
{
    std::mutex mx;
    std::condition_variable cv;
    int counter;

    std::thread producer( [ & ] ( )
    {
        while( true )
        {
            std::lock_guard<std::mutex> lock( mx );

            std::cout << "adding task" << std::endl;
            std::this_thread::sleep_for(1s);
            ++counter;

            cv.notify_one();
        }
    });

    std::thread consumer( [ & ] ( )
    {
        while( true )
        {
            std::unique_lock<std::mutex> lock( mx );

            cv.wait( lock, [ & ] ( )
            {
                return counter > 0;
            });

            std::cout << "Executing" << std::endl;
            std::this_thread::sleep_for(.5s);
            --counter;
        }
    });

    consumer.join();
    producer.join();

    return 0;
}

我想将2D数组的所有数据映射到html表中，这里是我的html表代码示例

[["Manchester City", 92], ["Liverpool", 82], ["Tottenham", 78], ["Chelsea", 78], ["Manchester United", 72], ["Arsenal", 69]]

那么如何解决呢？谢谢。

Answer 1

function createTable(tableData) {
  var table = document.createElement('table')
    , tableBody = document.createElement('tbody');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  document.body.appendChild(table);
}

createTable([["Manchester City", 92], ["Liverpool", 82], ["Tottenham", 78], ["Chelsea", 78], ["Manchester United", 72], ["Arsenal", 69]]
);

Answer 2

遍历数组，对于每个顶级元素，在表中添加一行。然后，对于每个下一级元素，添加一个单元格并将该元素的内容插入到表格单元格中。

Answer 3

您可以执行以下操作：


const toTable = (arr) =>
  `<table id="codexpl">
    <tr>
        <th>No</th>
        <th>Club</th>
        <th>Points</th>
    </tr>
    ${arr.map(
    (item, index) =>
      `<tr>
      <td>${index + 1}</td>
      <td>${item[0]}</td>
      <td>${item[1]}</td>
  </tr>`
  ).join('\n')}
</table>`

只需将数组传递给它，它将返回HTML代码。

将2D数组JavaScript映射到HTML表

3 个答案: