Цикл while внутри конкатенирования for - PullRequest
Новая
       3

Цикл while внутри конкатенирования for

0 голосов
/ 11 ноября 2018

когда я выполняю этот код, он выплевывает новую строку внутри таблицы, но он включает в себя предыдущую итерацию вместе с самой новой. Я хочу, чтобы все «как» было в первом ряду главной таблицы. И затем я хочу, чтобы все «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>

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018

Инициализируйте переменную 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>
0 голосов
/ 11 ноября 2018

Объявите эту переменную 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...