Добавление элементов в таблицу. Html & Js

331

16 ноября 2017, 03:18

Пытаюсь понять как добавлять эллементы в таблицу. Вот код

localStorage.setItem('faucet1' '1');
var faucet1 = localStorage.getItem('faucet1');
if
 (faucet1 == '1') { 
var tr = document.createElement("tr");
tr.innerHTML('<td>гег </td> <td> </td> <td> 
гег</td> <td> гег </td> <td> гег</td> ');
}
 else {
alert('error');
}
</script>
 <html>
<table>
<tr> <th colspan="2">Кран</th> 
<th>Выплата</th> 
<th>Время</th> 
<th>Ссылка</th> </tr>
<!-- Нужно добавлять строчки в этот участок и 
дальше -->

Не могу разобраться, как указать куда добавлять элементы. Как добавлять элементы.

Я совсем новичок. Надеюсь на вашу помощь.

Answer 1

Вот ссылки по теме:
Поиск элемента - https://learn.javascript.ru/searching-elements-dom
Добавление элемента на страницу - https://learn.javascript.ru/modifying-document
Если потребуется добавлять что-то в конкретную ячейку, то нужно изучить делегирование - https://learn.javascript.ru/event-delegation

//Дополнительный совет - не загрязняйте глобальное пространство переменными, лучше объявите функцию, которая будет добавлять вашу разметку в таблицу и объявляйте переменные в ней 
function myFunc() { 
 
  //Для начала, вам нужно найти элемент, в который нужно вставить вашу разметку. Вданном случае таблицу с id='table'. 
  var table = document.getElementById('table'); 
 
//Тут выдерните ваше значение из locslStorage, я просто присвою 1. 
  var faucet1 = 1; 
  //Теперь создаем строку и присваиваем ее переменной. 
  var tr = document.createElement("tr"); 
   
  if (faucet1 == 1) { 
 
//добавляем разметку в созданную строку 
    tr.innerHTML = '<td>гег </td> <td> </td> <td> гег</td> <td> гег </td> <td> гег</td>'; 
 
//вставляем строку в таблицу 
    table.appendChild(tr); 
 
  } else { 
   
    console.log('error'); 
     
  } 
 
}; 
 
myFunc();

<html> 
<body> 
 
    <table id='table'> 
      <tr> 
        <th colspan="2">Кран</th> 
        <th>Выплата</th> 
        <th>Время</th> 
        <th>Ссылка</th> 
      </tr> 
 
      <!-- Нужно добавлять строчки в этот участок и  
    дальше --> 
    </table> 
</body> 
</html>