Question

当我执行此代码时，它会在表内吐出新的一行，但它包括先前的迭代以及最新的迭代。我希望所有“ As”都在主表的第一行中。然后我希望所有“ B”都在第二行中，依此类推，等等。然后对于A0，A1和A2，我希望它们在第一行中自己的表中，第二行中的B0，B1相同等等

<head>
  <style>
  table,
    th,
    td {
      border: 1px solid black;
    }
  }
  </style>
</head>

<table id="table">
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="0"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="1"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="2"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="3"></table>
    </td>
  </tr>


</table>

<script>
  var array = [
    ["A0---", "A1----", "A2---"],
    ["B0----", "B1---"],
    ["C0---", "C1---"],
    ["D0---", "D1---"]
  ];

  var text = ""
  console.log(array.length);
  for (var i = 0; i < array.length; i++) {

    var j = 0;
    console.log(array[i].length);
    while (j < array[i].length) {
      text += "<tr><td>" + array[i][j] + "</td></tr>";
      j++;
    }

    document.getElementById(i).innerHTML = text;
  }
</script>

Answer 1

在var text = "";内声明此变量for-loop

var array = [  ["A0---", "A1----", "A2---"],  ["B0----", "B1---"],  ["C0---", "C1---"],  ["D0---", "D1---"]];

for (var i = 0; i < array.length; i++) {
  var text = "";
  var j = 0;
  while (j < array[i].length) {
    text += "<tr><td>" + array[i][j] + "</td></tr>";
    j++;
  }

  document.getElementById(i).innerHTML = text;
}

table,th,td {  border: 1px solid black;}

<table id="table">  <tr>    <td>gerp gerp</td>    <td>      <table id="0"></table>    </td>  </tr>  <tr>    <td>gerp gerp</td>    <td>      <table id="1"></table>    </td>  </tr>  <tr>    <td>gerp gerp</td>    <td>      <table id="2"></table>    </td>  </tr>  <tr>    <td>gerp gerp</td>    <td>      <table id="3"></table>    </td>  </tr></table>

Answer 2

将text变量初始化为第一个循环内的空字符串中的

for (var i = 0; i < array.length; i++) {
  let text = '';

但是请注意，通过使用.map和forEach之类的数组方法，而不是使用for，while，可以使代码更实用，更短，更易于阅读。，以及手动迭代（最好不必跟踪索引）：

array.forEach((subArr, i) => {
  const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
  document.getElementById(i).innerHTML = text.join('');
});

var array = [
  ["A0---", "A1----", "A2---"],
  ["B0----", "B1---"],
  ["C0---", "C1---"],
  ["D0---", "D1---"]
];

array.forEach((subArr, i) => {
  const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
  document.getElementById(i).innerHTML = text.join('');
});

table,
th,
td {
  border: 1px solid black;
}

<table id="table">
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="0"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="1"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="2"></table>
    </td>
  </tr>
  <tr>
    <td>gerp gerp</td>
    <td>
      <table id="3"></table>
    </td>
  </tr>


</table>

for循环连接中的while循环

2 个答案: