Форум

javaphp · #1 (**permalink**) 04.01.2016, 12:35

Подскажите, как в таблице <table> удалить последний дочерний элемент <tr>, со всеми входящими в него <tr>. Как здесь правильно использовать removeChild()? или как нибудь по другому

рони · #2 (**permalink**) 04.01.2016, 12:52

javaphp,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
   var tbody = document.querySelector('tbody');
       tbody.deleteRow(-1)
</script>
</body>

</html>

рони · #3 (**permalink**) 04.01.2016, 12:55

javaphp,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
   var tbody = document.querySelector('tbody');
       tbody.removeChild(tbody.lastElementChild)
</script>
</body>

</html>

javaphp · #4 (**permalink**) 04.01.2016, 12:57

Понял, спасибо. Я просто в querySelector писал 'table'.

javaphp · #5 (**permalink**) 04.01.2016, 12:58

А как правильно удалить с каждой tr последнюю дочернюю td?

рони · #6 (**permalink**) 04.01.2016, 13:14

javaphp, а подумать? или погуглить?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
  [].forEach.call( document.querySelectorAll('tr'), function(tr,i) {
     tr.deleteCell(-1)
});
</script>
</body>

</html>

рони · #7 (**permalink**) 04.01.2016, 13:16

javaphp,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
  [].forEach.call( document.querySelectorAll('tr td:last-child'), function(td,i) {
     var parent = td.parentNode;
     parent.removeChild(td);

});
</script>
</body>

</html>

javaphp · #8 (**permalink**) 04.01.2016, 13:21

Да пытался найти, но все что пробовал как-то удаляет не правильно. Подскажите что делает это выражение [].forEach.call? это цикл? Спасибо за помощь!

рони · #9 (**permalink**) 04.01.2016, 13:34

javaphp,
да цикл
https://learn.javascript.ru/array-iteration
https://learn.javascript.ru/traversi...массивы

javaphp · #10 (**permalink**) 04.01.2016, 13:38

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript