Динамическое удаление строк таблицы
Здравствуйте. Требуется сделать динамическое добавление строк в таблицу на экране и динамическое удаление выбранных строк (выбор осуществляется чекбоксом). События удаления/добавления: кнопки. Добавляю так:
{
z = document.getElementById('out'); // Получаем ссылку на таблицу
d = z.insertRow(z.rows.length); // Добавляем строку
d.setAttribute("id", "row_" + nextcount);
// Формируем строку элементов управления
z = document.createElement("input"); // Чекбокс (он указывает на удаляемую строку)
z.setAttribute("type", "checkbox");
z.setAttribute("id", "check_" + nextcount);
d.appendChild(z); // Добавляем к строке
// Текст
tn1 = document.createTextNode("текст "+(counter+1)+" ");
d.appendChild(tn1); // Добавляем к строке
z = document.createElement("input"); // Строка ввода
z.setAttribute("type", "text");
z.setAttribute("name", "answer"+counter);
z.setAttribute("id", "input_" + nextcount);
d.appendChild(z); // Добавляем к строке
out.appendChild(d); // Добавляем строку к таблице
}
А вот с удалением проблема. Пробовал работать с id, однако получается слишком сложно. Решил сделать удаление с помощью pTable.deleteRow(numRow). В начале id чекбоксов совпадают с номером строки, поэтому можно считать значени чекбокса по номеру строки. Проблема в том, что после удаления части строк id чекбокса и номер строки уже никак не коррелируют, поэтому я не могу получить номер удаляемой строки (он определяется по наличию включенного чекбокса). Как можно получить значение чекбокса по номеру строки таблицы, в которой чекбокс расположен? |
Идентификаторы вообще не нужны, у каждой строки есть свойство rowIndex:
var table = document.getElementById('out');
function deleteRows(table) {
var inputs = table.getElementsByTagName("input");
var i = inputs.length;
while (i--) {
var input = inputs[i];
if (input.checked == true) {
var tr = input.parentNode.parentNode;
table.deleteRow(tr.rowIndex);
}
}
}
Можно и еще раз наверх подняться и удалить tr через обычный removeChild. Код не проверял. p.s. однобуквенные имена переменных зло |
Спасибо. Насчет rowIndex не знал. Может быть, подскажете хорошую литературу по JavaScript с подробным описанием функций?
P.S. Замечание по коду. Используя выражение var tr = input.parentNode.parentNode;я получал сообщение об ошибке. Вывел результат tr и получил, что в результате такого выражения тип tr HTMLTableElement. Я убрал один parentNode и получил уже HTMLTableRowElement, т.е. var tr = input.parentNode;В этом случае функция работает так как и надо. |
Цитата:
|
У вас input прямо в tr лежит? Вообще должно быть так:
<table>
<tr>
<td><input … /></td>
…
тогда первый раз parentNode выдаст td, а второй — tr. Литературу не знаю, почти не читал книжек по JavaScript, на этом сайте есть несколько книг, возможно, в них есть это http://javascript.ru/book |
>>Octane: "Вообще должно быть так:"
Согласен с Вашим замечанием). Я просто для теста быстро накидывал, отсюда и строки без столбцов и однобуквенные переменные... То, для чего тему открывал, сделал. Всем спасибо. |
Помогите разобраться с похожей проблемой
Добрый день. проблема такая.
есть страничка HTM, на которой отлавливается ввод с клавиатуру и пишется в строковую переменную до нажатия ENTER. Далее полученную строку мы добаляем в массив и выводим в таблицу на экране. таблица состоит из 3 столбцов. в первом: находится checkbox/ во-втором: табельный номер(но он пока не заполняется) в третьем: выводятся или данная строка или часть этой строки. мне нужно чтоб пользователь мог выделить галочками ненужную строку и по нажатию кнопки(допустим "DELETE") удалялись выбранные строки. подскажите плиз, как это можно сделать? Код прилагаю:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<title>SAP</title>
<script language="javascript" type="text/javascript">
var char1 = '', mass = new Array(), lastn = '',
fastn = '', middlen = '', s4 = 0, s41 = 0, f = false;
var fio1 = "";
// Отлов ввода с клавы
function press(event)
{
if(event.keyCode == "13"){
mass[mass.length] = char1;
//fio()
char1 = '';
f = true;
insRow();
}else{
char1 += String.fromCharCode(event.keyCode);
}
}
// разбивание строки полученной при вводе с клавы
function fio()
{
for (i = 0; i < char1.length; i ++ )
{
// подсчет знаков "!"
if (char1.charAt(i) == '!')
{
s4 = s4 + 1;
s41 = i
}
if (s4 == 14 && i != s41) // фамилия
{
lastn += char1.charAt(i)
}
if (s4 == 15 && i != s41) // имя
{
fastn += char1.charAt(i)
}
if (s4 == 16 && i != s41) // отчество
{
middlen += char1.charAt(i)
}
}
fio1 = lastn + " " + fastn + " " + middlen;
}
// функция для добавления новой строки в таблицу на экране
function insRow()
{
var x = document.getElementById('MyTable').insertRow(0);
var k = x.insertCell(0);
var y = x.insertCell(1);
var z = x.insertCell(2);
k.innerHTML = '<td><input type="checkbox" id=checkN"' + ((mass.length) - 1) + '"></td>';
y.innerHTML = "табельный номер";
if(f){z.innerHTML = mass[mass.length-1];
f = false;
}else{z.innerHTML = fio1;}
}
function demo()
{
char1 = '!!8!!!01!001234567891!!1!0!2011-01-01!Городская больница №1!г.Москва, ул.Бутырская, д.88!123456789012345!PAULSEN!OLAF!!1965-10-12!0!ОАО Предприятие!1!01!!!!0!!!!!!!!!!!!!!!!!!!!!!2013-06-05!2013-06-12!Терапевт!Петрова В.В.!!!!!!!!!!!1994-04-22!!';
if (char1.charAt(0) == '!' && char1.charAt(1) == '!' && char1.charAt(2) == '8' && char1.charAt(3) == '!' && char1.charAt(4) == '!' && char1.charAt(5) == '!')
{
mass[mass.length] = char1;
fio();
char1 = '';
insRow();
}
}
// данная функция складывает элементы массива в строку и отправляет их на сервер
//var result = "!!8!!!";
//function sendtosap()
//{
// var r = confirm(mass[])
// result = result + '@';
// if (r == true){
// document.f1.h1.value = result;
// document.location.reload(true);
// }
// else
// result = "";
//}
</script>
</head>
<body onkeypress = "press(event)">
<H1>"SAP"</H1>
<div id="header" style="background-color:#87CEFA;">
<INPUT TYPE="button" NAME="myButton" value="Добавить строку готовую строку, вместо ввода с клавы"
onClick="demo()">
<form id="fms" method="get" action="">
<DIV style="position: absolute; top: 130px; left: 20px;
background-color: #F0FFFF ; color: navy">
<table id="MyTable" border="1">
</table>
</DIV>
</form>
<form name = "f1" method="POST" action="sapevent:longtext">
<DIV style="position: absolute; top: 80px; left: 1000px;
background-color: #7FFFD4 ; color: navy">
<INPUT TYPE="submit" value="Send text to SAP" name="cc" onclick = "sendtosap(event) ">
<br /><input type="hidden" value="" name="h1"/>
</DIV>
</form>
</body>
</html>
|
Angelo4ek88,
<!DOCTYPE html>
<html>
<head>
<title>SAP</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript">
var char1 = '', mass = new Array(), lastn = '',
fastn = '', middlen = '', s4 = 0, s41 = 0, f = false;
var fio1 = "";
// Отлов ввода с клавы
function press(event)
{
if(event.keyCode == "13"){
mass[mass.length] = char1;
//fio()
char1 = '';
f = true;
insRow();
}else{
char1 += String.fromCharCode(event.keyCode);
}
}
// разбивание строки полученной при вводе с клавы
function fio()
{
for (i = 0; i < char1.length; i ++ )
{
// подсчет знаков "!"
if (char1.charAt(i) == '!')
{
s4 = s4 + 1;
s41 = i
}
if (s4 == 14 && i != s41) // фамилия
{
lastn += char1.charAt(i)
}
if (s4 == 15 && i != s41) // имя
{
fastn += char1.charAt(i)
}
if (s4 == 16 && i != s41) // отчество
{
middlen += char1.charAt(i)
}
}
fio1 = lastn + " " + fastn + " " + middlen;
}
// функция для добавления новой строки в таблицу на экране
function insRow()
{
var x = document.getElementById('MyTable').insertRow(0);
var k = x.insertCell(0);
var y = x.insertCell(1);
var z = x.insertCell(2);
k.innerHTML = '<input type="checkbox" id=checkN"' + ((mass.length) - 1) + '">';
y.innerHTML = "табельный номер";
if(f){z.innerHTML = mass[mass.length-1];
f = false;
}else{z.innerHTML = fio1;}
}
function demo()
{
char1 = '!!8!!!01!001234567891!!1!0!2011-01-01!Городская больница №1!г.Москва, ул.Бутырская, д.88!123456789012345!PAULSEN!OLAF!!1965-10-12!0!ОАО Предприятие!1!01!!!!0!!!!!!!!!!!!!!!!!!!!!!2013-06-05!2013-06-12!Терапевт!Петрова В.В.!!!!!!!!!!!1994-04-22!!';
if (char1.charAt(0) == '!' && char1.charAt(1) == '!' && char1.charAt(2) == '8' && char1.charAt(3) == '!' && char1.charAt(4) == '!' && char1.charAt(5) == '!')
{
mass[mass.length] = char1;
fio();
char1 = '';
insRow();
}
}
// данная функция складывает элементы массива в строку и отправляет их на сервер
//var result = "!!8!!!";
//function sendtosap()
//{
// var r = confirm(mass[])
// result = result + '@';
// if (r == true){
// document.f1.h1.value = result;
// document.location.reload(true);
// }
// else
// result = "";
//}
function del_row() {
var nodeList = document.getElementsByTagName('input');
var array = Array.prototype.slice.call(nodeList);
for (var i = 0; i < array.length; i++) {
if (array[i].checked) {
var tr = array[i].parentNode.parentNode;
var parent = tr.parentNode
parent.removeChild(tr);
}
}
}</script>
</head>
<body onkeypress = "press(event)">
<H1>"SAP"</H1>
<div id="header" style="background-color:#87CEFA;">
<INPUT TYPE="button" NAME="myButton" value="Добавить строку готовую строку, вместо ввода с клавы"
onClick="demo()">
<form id="fms" method="get" action="">
<DIV style="position: absolute; top: 130px; left: 20px;
background-color: #F0FFFF ; color: navy">
<table id="MyTable" border="1">
</table>
<input name="" type="button" value="del_check_row" onclick="del_row()">
</DIV>
</form>
<form name = "f1" method="POST" action="sapevent:longtext">
<DIV style="position: absolute; top: 80px; left: 1000px;
background-color: #7FFFD4 ; color: navy">
<INPUT TYPE="submit" value="Send text to SAP" name="cc" onclick = "sendtosap(event) ">
<br /><input type="hidden" value="" name="h1"/>
</DIV>
</form>
</DIV>
</body>
</html>
|
Angelo4ek88,
зачем теги td в Цитата:
|
Цитата:
но Спасибо огромное что отозвались на мой крик о помощи.. просто уже мозг вскипел а результата не было.. |
| Часовой пояс GMT +3, время: 17:10. |