Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужно удалить строку в таблице. (https://javascript.ru/forum/dom-window/13843-nuzhno-udalit-stroku-v-tablice.html)

Раиль 16.12.2010 03:16

Нужно удалить строку в таблице.
 
С помощью скрипта можно добавлять строки в таблицу. После добавления строк необходимо удалить некоторые из них.

Листинг
<html>

<table id="tab1" class="sortable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
<fieldset>
<legend>Добавить товар</legend>
<ul>
<li>
<label for="name">Название товара</label>
<input type="text" name="name" id="name" value="" size="22" tabindex="1" />
</li>
<li>
<label for="value_my">Количество</label>
<input type="text" name="value_my" id="value_my" value="" size="27" tabindex="2" />
</li>
<li>
<label for="price">Стоимость</label>
<input type="text" name="price" id="price" value="" size="28" tabindex="3" />
</li>
<li>
<label for="subm">Действия</label>
<input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" />
<input type="reset" name="subm" class="submit" value="Очистить форму" tabindex="4" />

</li>
</ul>
</fieldset>
</form>

<script>
var d = document;

var name;
var value_my;
var price;

function addRow()
{
// Считываем значения с формы
name = d.getElementById('name').value;
value_my = d.getElementById('value_my').value;
price = d.getElementById('price').value;

// Находим нужную таблицу
var tbody = d.getElementById('tab1').getElementsByTagName('TBO DY')[0];

// Создаем строку таблицы и добавляем ее
var row = d.createElement("TR");
tbody.appendChild(row);

// Создаем ячейки в вышесозданной строке
// и добавляем тх
var td1 = d.createElement("TD");
var td2 = d.createElement("TD");
var td3 = d.createElement("TD");

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

// Наполняем ячейки
td1.innerHTML = name;
td2.innerHTML = value_my;
td3.innerHTML = price;

}

</script>

</head>

</body>
</html>

Желательно добавить форму и кнопку удаления. В форму вводится либо номер по порядку, либо name. Подскажите пожалуйста как можно это осуществить. Я тут нарыл кой-че, может это как нибудь сюда приплести.

Удалить строку №&nbsp;<input type="text" id="rowToRem"><input type="button" value="-" onClick="rem_line(document.getElementById('rowToRe m').value)">

только сам не могу разобраться

ksa 16.12.2010 15:28

Цитата:

Сообщение от Раиль
Желательно добавить форму и кнопку удаления

Как вариант...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
</style>
<script type="text/javascript">
function Delete() {
	var o=document.getElementById('tbl')
	var n=+document.getElementById('n_row').value
	if (n<1) {
		alert('Не верно указан номер строки...')
		return false
	}
	if (o.rows.length<n) {
		alert('В таблице нет столько строк...')
		return false
	}
	o.rows[n-1].removeNode(true)
}
</script>
</head>
<body>
<table id='tbl'>
	<tr>
		<td>line 1</td>
	</tr>
	<tr>
		<td>line 2</td>
	</tr>
	<tr>
		<td>line 3</td>
	</tr>
</table>
<input type='text' id='n_row' />
<input type='button' value='Delete' onclick='Delete()' />
</body>
</html>

Sweet 16.12.2010 15:58

Цитата:

Сообщение от ksa
Как вариант...

Не лучший вариант из-за .removeNode.


Часовой пояс GMT +3, время: 12:30.