Question

我有两个数组

array1 = ["a","b","c"];
array2 = ["1","2","3"];

我不知道如何使用forEach或map到表行中进行类似这样的输出。

 array1   array2
   a        1
   b        2
   c        3

使用nodejs

Answer 1

只需使用forEach遍历一个数组，然后使用索引访问另一个数组的元素。

let array1 = ["a","b","c"];
let array2 = ["1","2","3"];

let tab = document.getElementById('table');
array1.forEach((e,i)=>{
  let tr = document.createElement('tr');
  let td1 = document.createElement('tr');
  let td1text = document.createTextNode(e);
  let td1Ele = td1.appendChild(td1text);
  tr.appendChild(td1Ele)
  let td2 = document.createElement('tr');
  let td2text = document.createTextNode(`\t ${array2[i]}`);
  let td2Ele = td2.appendChild(td2text);
  tr.appendChild(td2Ele)
  tab.appendChild(tr);
  console.log(e, `\t` , array2[i]);
})

<table id='table'>
</table>

Answer 2

尝试一下：

var table = array1.map(function(e, i) {return [e, array2[i]];});

Answer 3

假设您具有以下HTML代码段（如果没有，则可以将其添加到HTML中）

<table>
    <thead>
        <tr>
            <td>array1</td>
            <td>array2</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>

您需要做的是使用索引循环访问数组的值。下面的javascript用于生成HTML中的表格单元格，或者选择使用基本的for循环，也可以使用forEach方法，因为forEach方法在第二个参数中公开了索引。

var array1 = ['a', 'b', 'c'];
var array2 = ['1', '2', '3'];
var tbody = document.querySelector('tbody');

// either use a for-loop
for (var i = 0; i < array1.length; i++) {
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    td1.textContent = array1[i];
    td2.textContent = array2[i];
    tr.appendChild(td1);
    tr.appendChild(td2);
    tbody.appendChild(tr);
}

// or the array's forEach method
array1.forEach(function (val, idx) {
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    td1.textContent = array1[idx];
    td2.textContent = array2[idx];
    tr.appendChild(td1);
    tr.appendChild(td2);
    tbody.appendChild(tr);
});

Answer 4

如果您的意思是html表，则可能会使用map / reduce解决方案，例如：

const array1 = ["a","b","c"];
const array2 = ["1","2","3"];
// map columns
const columns = array1.map( (c, i) => [c, array2[i]] );

const table = `
  <table>
    <tr>
      <th>array1</th>
      <th>array2</th>
    </tr>
    ${columns
        .reduce( (p, [v1, v2]) => p + 
          `<tr><td class="center">${v1}</td>
           <td class="center">${v2}</td></tr>`, "")
    }
  </table>`;
 
 document.body.innerHTML = table;

body {
  font: 14px/23px verdana, arial;
  margin: 2rem;
}

td.center {
  text-align: center;
}

使用nodejs在HTML的一个表行中包含两个数组

4 个答案: