Форум

friend_RU · #1 (**permalink**) 22.03.2016, 13:20

Здравствуйте, 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>

рони · #2 (**permalink**) 22.03.2016, 14:16

Сообщение от friend_RU

delete

<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>

ruslan_mart · #3 (**permalink**) 22.03.2016, 14:18

Функцию нужно переименовать, так как 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);
}

Форум

Справочник

Discord чат

Курсы javascript