Javascript: Как создать новую строку таблицы для каждого элемента в массиве? - PullRequest
Новая
       3

Javascript: Как создать новую строку таблицы для каждого элемента в массиве?

0 голосов
/ 22 апреля 2020

У меня есть массив в javascript, который содержит имена: 

var names = ['JOHN', 'MIKE', 'SAM'];

Я хочу создать таблицу HTML, где каждый элемент в массиве имеет свою собственную строку. Каждый раз, когда мы вставляем элемент в массив, должна добавляться новая строка с таким именем 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
  <tr>
    <td>JOHN</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>MIKE</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>SAM</td>
    <td></td>
    <td></td>
  </tr>
</table>
<script>
var names = ['JOHN', 'MIKE', 'SAM'];
</script>
</body>
</html>

1 Ответ

1 голос
/ 22 апреля 2020

Вы можете использовать следующее для генерации динамических c строк в таблице.

Присвойте таблице id и получите элемент таблицы, такой как 

const table = document.getElementById('table');

Затем выполните forEach() в массиве, чтобы выполнить итерацию и сгенерировать динамические c строки, например, 

const tr = document.createElement('tr');

Поскольку имеется три столбца (на основе значений th), поэтому вы можете сгенерировать td's для соответствующих столбцов, например, 

const td1 = document.createElement('td');
const td2 = document.createElement('td');
const td3 = document.createElement('td');

Затем, чтобы включить имя, полученное из массива, вы можете сделать это следующим образом: 

const name = document.createTextNode(item);

Затем вы можете добавить имя к первому td, как, 

td1.appendChild(name);

Затем вы можете добавлять каждый элемент по одному соответственно.

Рабочий фрагмент: 

const names = ['JOHN', 'MIKE', 'SAM', 'Another Name', 'Yet Another Name'];

const table = document.getElementById('table');

names.forEach((item,index) => {
    const tr = document.createElement('tr');   

    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');

    const name = document.createTextNode(item);

    td1.appendChild(name);
    
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    table.appendChild(tr);
})
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%" id="table">
  <tr>
    <th>Name</th>
    <th>Grade</th> 
    <th>Roll</th>
  </tr>
</table>
</body>
</html>
...