Как удалить строку в таблице c помощью javascript?
Сделала так, чтобы заполняемые поля добавлялись в таблицу.
Не могу сделать так, чтобы можно было выборочно удалять строки из таблицы.
Нашла в инете отличный пример с отдельной ячейкой, но не могу применить к себе, у меня не работает.
Помогите соединить с моим кодом - https://jsfiddle.net/d2vyecu6/1
Мой код:
var d = document;
var name;
var field;
var posada;
function addRow()
{
// Считываем значения с формы
name = d.getElementById('name').value;
field = d.getElementById('field').value;
posada = d.getElementById('posada').value;
// Находим нужную таблицу
var tbody = d.getElementById('tab1').getElementsByTagName('TBODY')[0];
// Создаем строку таблицы и добавляем ее
var row = d.createElement("TR");
tbody.appendChild(row);
// Создаем ячейки в вышесозданной строке
// и добавляем тх
var td1 = d.createElement("TD");
var td2 = d.createElement("TD");
var td3 = d.createElement("TD");
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
// row.appendChild(td3); сюда добавить поле, указав пордок ячейки row.appendChild(td3);
// Наполняем ячейки
td1.innerHTML = name;
td2.innerHTML = field;
td3.innerHTML = posada;
// сюда добавить поле вида: td4.innerHTML = posada;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="my.css" rel="stylesheet">
<title>Привет мир!</title>
</head>
<body>
<table id="tab1" class="sortable">
<thead>
<tr>
<th>ФИО</th>
<th>Должность</th>
<th>Field</th>
<th>Удалить</th>
<!-- <th>Field</th>
Добавить заголовок в таблицу
-->
</tr>
</thead>
<tbody>
</tbody>
</table>
<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Добавить сотрудника</legend>
<ul>
<li>
<label for="name">Фамилия</label>
<input type="text" name="name" id="name" value="" size="12" tabindex="1" />
</li>
<li>
<label for="field">Инициалы</label>
<input type="text" name="field" id="field" value="" size="12" tabindex="2" />
</li>
<!-- Добавить поле для вывода -->
<!-- <li>
<label for="field">Инициалы</label>
<input type="text" name="field" id="field" value="" size="12" tabindex="2" />
</li> -->
<li>
<label for="posada">Должность</label>
<input type="text" name="posada" id="posada" value="" size="12" tabindex="3" />
</li>
<li>
<label for="subm">Действия</label>
<input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" />
</li>
</ul>
</fieldset>
</form>
<script src="1.js"> </script>
</body>
</html>
<!-- Добавить поле для вывода -->
<!-- <li>
<label for="field">Инициалы</label>
<input type="text" name="field" id="field" value="" size="12" tabindex="2" />
</li> -->