Форум

ivt22 · #1 (**permalink**) 03.01.2016, 22:45

Добрый день. Подскажите пожалуйста, а то совсем застрял на одном месте. Как удалить строку из таблицы, зная значение одной из ячеек этой строки. Допустим есть таблица.

<table cellspacing="0" border="1" class="zapchasti">
		<tr class="zapchasti">
			<th>Номер</th>
			<th>Количество</th>
			<th>Номер по каталогу</th>
			<th>Наименование</th>
			<th>Цена</th>
		</tr>
		<tr class="zapchasti" id="1"  onclick=selectRow(event,this)>
			<td>1</td>
			<td>1 шт.</td>
			<td>236-1002012-А5</td>
			<td>Блок цилиндров</td>
			<td>345 р.</td>
		</tr>
		<tr class="zapchasti" id="2" onclick=selectRow(event,this)>
			<td>2</td>
			<td>4 шт.</td>
			<td>236-1005178</td>
			<td>Болт стяжной</td>
			<td>567 р.</td>
		</tr>
		<tr class="zapchasti" id="3" onclick=selectRow(event,this)>
			<td>3</td>
			<td>8 шт.</td>
			<td>236-1005181</td>
			<td>Шайба</td>
			<td>1435 р.</td>
		</tr>
		<tr class="zapchasti" id="4" onclick=selectRow(event,this)>
			<td>4</td>
			<td>11 шт.</td>
			<td>312304-П</td>
			<td>Шайба</td>
			<td>2000 р.</td>
		</tr>
        </table>

Нужно удалить строку из таблицы зная номер по каталогу, допустим 236-1005181

Lemme · #2 (**permalink**) 03.01.2016, 23:16

Например так

function removeByCatId(id) {
	[].forEach.call(document.querySelectorAll('tr'), function(item) {
		if (item.children[2].innerHTML === id) {
			item.parentNode.removeChild(item);
		}
	});
}
removeByCatId('236-1005181');

рони · #3 (**permalink**) 03.01.2016, 23:20

ivt22,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<style type="text/css">
  .red td{
    background-color: #FF0000;
    color: #FFFFFF;
  }

  </style>
</head>

<body>
<table cellspacing="0" border="1" class="zapchasti">
		<tr class="zapchasti">
			<th>Номер</th>
			<th>Количество</th>
			<th>Номер по каталогу</th>
			<th>Наименование</th>
			<th>Цена</th>
		</tr>
		<tr class="zapchasti" id="1"  onclick=selectRow(event,this)>
			<td>1</td>
			<td>1 шт.</td>
			<td>236-1002012-А5</td>
			<td>Блок цилиндров</td>
			<td>345 р.</td>
		</tr>
		<tr class="zapchasti" id="2" onclick=selectRow(event,this)>
			<td>2</td>
			<td>4 шт.</td>
			<td>236-1005178</td>
			<td>Болт стяжной</td>
			<td>567 р.</td>
		</tr>
		<tr class="zapchasti" id="3" onclick=selectRow(event,this)>
			<td>3</td>
			<td>8 шт.</td>
			<td>236-1005181</td>
			<td>Шайба</td>
			<td>1435 р.</td>
		</tr>
		<tr class="zapchasti" id="4" onclick=selectRow(event,this)>
			<td>4</td>
			<td>11 шт.</td>
			<td>312304-П</td>
			<td>Шайба</td>
			<td>2000 р.</td>
		</tr>
        </table>

<script>
function fn(str,cls)
{
var tbody = document.querySelector('.zapchasti tbody') ;
[].forEach.call( tbody.querySelectorAll('td'), function(el,i) {
     var parent = el.parentNode;
     parent && el.textContent.indexOf(str) !== -1 && (cls ? parent.classList.toggle(cls) : tbody.removeChild(parent))
});
}
fn('236-1005181')//удаление
fn('236-1002012-А5','red')//выделение оно же снятие если повторно
</script>
</body>

</html>

ivt22 · #4 (**permalink**) 04.01.2016, 09:59

Спасибо большое то что нужно

Форум

Справочник

Discord чат

Курсы javascript