Как передать объект тега HTML в функцию Javascript?
Здравствуйте, javascript пользуюсь впервые и единственный, наверное, раз. Возможно неправильно обозначил проблему в заголовке, не судите строго.
У меня есть HTML страница. В странице таблица. В таблице строки. В строках ячейки с тегом-ссылкой "Удалить". При нажатии на эти самые "Удалить" должна вызываться js функция и удалять из таблицы именно ту строку, ссылка "Удалить" которой использовалась. Не могу понять как передать <td><a href=javascript:delete(*СЮДА*);>Удалить</a></td> объект тега <a> ну или сразу <td> или <tr>. Ниже представлен код. Тоже сильно не ругайте за структуру. Первый раз пишу
<html>
<head>
<title>Employees</title>
<script type = "text/javascript" >
function delete(obj) {
var table = document.getElementById("table");
tr = *МОЖЕТ КАКОЙ-ТО obj.parentNode.parentNode?*
table.deleteRow(tr.rowIndex);
}
</script>
</head>
<body>
<form action="handler.php">
<table border="1" id="table">
<caption>Работники</caption>
<!-- Названия столбцов -->
<tr>
<th><!-- Поле без имени --></th>
<th>No</th>
<th>Имя</th>
<th>Должность</th>
<th>Дата найма</th>
<th>Департамент</th>
<th>Удалить</th>
</tr>
<!-- Сотрудники -->
<!-- 1 -->
<tr>
<td><input type="checkbox"></td>
<td><a href="http://employee.com/id1">1</a></td>
<td>Артур</td>
<td>Уборщик</td>
<td>01.01.01</td>
<td>SPCD</td>
<td><a href=javascript:delete(*ЧТО ПИСАТЬ СЮДА?*);>Удалить</a></td>
</tr>
<!-- Дальше идет еще десяток таких же строк -->
</table>
</form>
</body>
</html>
|
Цитата:
<html>
<head>
<title>Employees</title>
<meta charset="utf-8">
<script type = "text/javascript" >
function del(tr) {
var table = document.getElementById("table");
table.deleteRow(tr.rowIndex);
}
</script>
</head>
<body>
<form action="handler.php">
<table border="1" id="table">
<caption>Работники</caption>
<!-- Названия столбцов -->
<tr>
<th><!-- Поле без имени --></th>
<th>No</th>
<th>Имя</th>
<th>Должность</th>
<th>Дата найма</th>
<th>Департамент</th>
<th>Удалить</th>
</tr>
<!-- Сотрудники -->
<!-- 1 -->
<tr>
<td><input type="checkbox"></td>
<td><a href="http://employee.com/id1">1</a></td>
<td>Артур</td>
<td>Уборщик</td>
<td>01.01.01</td>
<td>SPCD</td>
<td><a href="#" onclick="del(this.parentNode.parentNode)">Удалить</a></td>
</tr>
<!-- Дальше идет еще десяток таких же строк -->
</table>
</form>
</body>
</html>
|
Функцию нужно переименовать, так как delete является оператором.
<td><a href="#" onclick="deleteRow(this)">Удалить</a></td>
function deleteRow(obj) {
var row = obj.parentNode.parentNode;
row.parentNode.removeChild(row);
}
Если ссылка будет находится в любой вложенности, то тогда лучше так:
function deleteRow(obj) {
var row = obj.closest('tr');
row.parentNode.removeChild(row);
}
|
| Часовой пояс GMT +3, время: 03:21. |