Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.01.2016, 12:35
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

DOM удаление дочернего элемента
Подскажите, как в таблице <table> удалить последний дочерний элемент <tr>, со всеми входящими в него <tr>. Как здесь правильно использовать removeChild()? или как нибудь по другому
Ответить с цитированием
  #2 (permalink)  
Старый 04.01.2016, 12:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

удаление строк в таблице
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>

Последний раз редактировалось рони, 04.01.2016 в 13:17.
Ответить с цитированием
  #3 (permalink)  
Старый 04.01.2016, 12:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

удаление строк в таблице
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>

Последний раз редактировалось рони, 04.01.2016 в 13:17.
Ответить с цитированием
  #4 (permalink)  
Старый 04.01.2016, 12:57
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

Понял, спасибо. Я просто в querySelector писал 'table'.
Ответить с цитированием
  #5 (permalink)  
Старый 04.01.2016, 12:58
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

А как правильно удалить с каждой tr последнюю дочернюю td?
Ответить с цитированием
  #6 (permalink)  
Старый 04.01.2016, 13:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

удаление ячеек в таблице
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

удаление ячеек в таблице
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>
Ответить с цитированием
  #8 (permalink)  
Старый 04.01.2016, 13:21
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

Да пытался найти, но все что пробовал как-то удаляет не правильно. Подскажите что делает это выражение [].forEach.call? это цикл? Спасибо за помощь!
Ответить с цитированием
  #9 (permalink)  
Старый 04.01.2016, 13:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

javaphp,
да цикл
https://learn.javascript.ru/array-iteration
https://learn.javascript.ru/traversi...массивы
Ответить с цитированием
  #10 (permalink)  
Старый 04.01.2016, 13:38
Интересующийся
Отправить личное сообщение для javaphp Посмотреть профиль Найти все сообщения от javaphp
 
Регистрация: 02.01.2016
Сообщений: 28

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена DOM элемента другим элементом MaxXxaM Events/DOM/Window 5 04.05.2013 01:24
Удаление элемента DOM при неполном обновлении страницы (ВКонтакте) jsuser Events/DOM/Window 6 08.02.2013 21:28
удаление элемента dom Catherine Events/DOM/Window 0 28.10.2011 23:35
удаление DOM элемента и перезагрузка страницы Andrey2005 Общие вопросы Javascript 3 12.10.2009 23:49
Как определить id дочернего элемента DOM? Motonto Events/DOM/Window 1 09.04.2009 08:13