Удалить строку из таблицы.
Добрый день. Подскажите пожалуйста, а то совсем застрял на одном месте. Как удалить строку из таблицы, зная значение одной из ячеек этой строки. Допустим есть таблица.
<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 |
Например так
function removeByCatId(id) {
[].forEach.call(document.querySelectorAll('tr'), function(item) {
if (item.children[2].innerHTML === id) {
item.parentNode.removeChild(item);
}
});
}
removeByCatId('236-1005181');
|
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>
|
Спасибо большое то что нужно
|
| Часовой пояс GMT +3, время: 18:17. |