Я пытаюсь создать таблицу 8x8 квадратов в HTML с помощью сценария - PullRequest
Новая
       7

Я пытаюсь создать таблицу 8x8 квадратов в HTML с помощью сценария

0 голосов
/ 09 января 2020

Я подумал, что, возможно, делаю это для l oop вот так 

<table>
  <script>
    for (var i; i = 0; i < 8; i++) {
      document.write("<tr>")
      for (var j; j = 0; j < 8; j++) {
        document.write("<td></td>")
      }
      document.write("<tr>")
    }
  </script>
</table>

Этот код не работает. Пожалуйста, поймите, что я совсем не владею js, поэтому решение с расширением действительно поможет.

Ответы [ 3 ]

2 голосов
/ 09 января 2020

document.write не будет работать, как вы пытались здесь, он не будет писать теги <tr> в месте, которое вы упомянули.

Вам нужно изменить DOM, в частности table element.

Ниже кода принимает ссылку table и добавляет в нее 8 строк и 8 столбцов. 

document.querySelector("table").innerHTML = new Array(8).fill("<tr>" + new Array(8).fill("<td></td>").join("") + "</tr>").join("");
td {
  border: 1px solid;
  padding: 5px;
}
<table></table>

PS: Это базовый c пример, с которого можно начать, есть лучшие способы добиться этого. Вы должны больше посмотреть на DOM Manipulation в JS.

1 голос
/ 09 января 2020

Используйте методы манипуляции DOM и убедитесь, что перед закрывающим тегом <body> вместо <tabl> ставится <script>, вот рабочий пример: 

let table = document.getElementById('table');
for (let i = 0; i < 8; i++) {
  let row = document.createElement('TR');
  table.appendChild(row);

  for (let i = 0; i < 8; i++) {
    var cell = document.createElement('TD');
    row.appendChild(cell);
  }
}
td {
  border: 1px solid #333;
  padding: 5px;
}
<table id="table"></table>
1 голос
/ 09 января 2020

document.write() никогда не создаст дочерний элемент внутри элемента <table>, вы можете создать дочерний элемент для родителя с помощью appendChild().

Вот пример с чистым JavaScript: 

for (var i = 0; i < 8; i++) {
  var row = document.createElement("tr");
  document.getElementById('tbl').appendChild(row).setAttribute("id", 'row_' + i);
  for (var j = 0; j < 8; j++) {
    var column = document.createElement("td");
    document.getElementById('row_' + i).appendChild(column);
  }
}
table {
  border: 1px solid black;
}

td {
  border: 1px solid blue;
  padding: 3px;
  margin: 2px;
}
<table id='tbl'></table>

Здесь скрипт создаст дочерний элемент <tr> для <table>, затем вы можете создать дочерний элемент <td> для <tr>.

...