结合两个数组来创建一个表（javascript）？答案

【问题标题】：Combining two arrays to create a table (javascript)?结合两个数组来创建一个表（javascript）？
【发布时间】：2018-10-19 06:10:15
【问题描述】：

我有两个数组中的数据。我的数据如下所示：

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]

我希望我的表格具有与猫中的元素相同的行数和与狗中的元素相同的列数。这是我目前所拥有的：

<html>
<table id = "mytable">
    <tr>
        <td> Cats/dogs</td>
    </tr>
</table>    
<body>

<script>
var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]
var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++){
    var column = "<td>" + cats[i] + "</td>";
    for (var j = 0; j < numberOfColumns; j++){
        column += "<td id =" cats.concat(dogs) "></td>;
    }
    $("#mytable").append("<tr>" + column + "</tr>");
}
</script>
</body>
</html>

我仍然无法显示

【问题讨论】：

How to merge two arrays in JavaScript and de-duplicate items的可能重复
运行它时到底出了什么问题？非常具体。如果您将此作为 html+javascript sn-p 添加到您的问题中，我们可以运行它并为您提供更好的答案。
@MaxBaldwin 链接的问题平面合并了 2 个数组，而 OP 想要从这两个数组中创建一个二维表（数组）。
for (var = 0; i < numberOfRows; i++){ 看起来你的意思是for (var i = 0; i < numberOfRows; i++){
<rant>@downvoter：我认为不赞成投票的答案不会向那些试图帮助其他开发人员的人传递正确的信息。如果找到重复项，它最终会突出显示。但是，惩罚真正试图帮助的人弊大于利。</rant>

标签： javascript arrays

【解决方案1】：

你拼错了 table，你的 table 里应该有一个 body。

let cats = ['persian', 'tabby', 'bengal'];
let dogs = ['shepard', 'terria'];


var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++){
    var row = $("<tr>");
    for (var j = 0; j < numberOfColumns; j++){
        row.append($(`<td>`).text(`${cats[i]} - ${dogs[j]}`));
    }
    $("#mytable tbody").append(row);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "mytable">
  <tbody>
    <tr>
        <td> Cats/dogs</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案2】：

或者使用Array.forEach:

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]

var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

cats.forEach(function (cat) {
    $("#mytable").append(`<tr id="${cat}">`)
  dogs.forEach(function (dog) {
    $(`#${cat}`).append(`<td>${cat},${dog}</td>`)
  })
})

https://jsfiddle.net/zj1dcs6q/10/

【讨论】：

【解决方案3】：

您可以使用嵌套循环来构建您的表格。这是一个例子：

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"];

var html = "";
for (var i = 0; i < cats.length; i++) {
  html += "<tr>";
  for (var j = 0; j < dogs.length; j++) {
    html += "<td>";
    html += "cats[" + i + "] = " + cats[i] + ", dogs[" + j + "] = " + dogs[j];
    html += "</td>";
  }
  html += "</tr>";
}
document.getElementById("mytable").innerHTML = html;

<table id="mytable" border="1">
</table>

【讨论】：

【解决方案4】：

欢迎来到 Stack Overflow。您快到了。每次进入外循环都需要添加一个新的tr。看看我的 sn-p。

免责声明：简陋的代码质量。请不要评判我！

var cats = [ "a", "b", "c", "d", "e", "f"];
var dogs = [ "z", "y", "x", "w"]
var str = '';
for(let cat of cats) {
  str = '<tr>';
  for(let dog of dogs) {
    str += '<td>'+cat+' '+dog+'</td>';
  }
  str += '</tr>';
  $("#mytable").append( str );
}

td {
border: 1px solid #ddd;
padding: 4px 6px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tabld id = "mytable">
</table>

【讨论】：

【解决方案5】：

您的代码中有一些语法错误。

固定的 HTML：

<table id="mytable">
  <tr>
    <td> Cats/dogs</td>
  </tr>
</table>

固定的 JS：变种猫= [“a”，“b”，“c”，“d”，“e”，“f”]； var dogs = ["z", "y", "x", "w"];

var numberOfRows = cats.length;
var numberOfColumns = dogs.length;

for (var i = 0; i < numberOfRows; i++) {
  var column = "<td>" + cats[i] + "</td>";
  for (var j = 0; j < numberOfColumns; j++) {
    column += "<td></td>";
  }
  $("#mytable").append("<tr>" + column + "</tr>");
}

现在可以按照您的描述工作： https://jsfiddle.net/6Lzdejta/

【讨论】：

不建议有多个元素具有相同的id 值。
是的，你是对的。我刚刚修复了没有 id 的语法。我将编辑我的答案。