Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2009, 15:08
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

Динамическое удаление строк таблицы
Здравствуйте. Требуется сделать динамическое добавление строк в таблицу на экране и динамическое удаление выбранных строк (выбор осуществляется чекбоксом). События удаления/добавления: кнопки. Добавляю так:

{
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 чекбокса и номер строки уже никак не коррелируют, поэтому я не могу получить номер удаляемой строки (он определяется по наличию включенного чекбокса). Как можно получить значение чекбокса по номеру строки таблицы, в которой чекбокс расположен?
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2009, 16:40
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Идентификаторы вообще не нужны, у каждой строки есть свойство 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. однобуквенные имена переменных зло

Последний раз редактировалось Octane, 04.07.2009 в 16:45.
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2009, 18:02
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

Спасибо. Насчет rowIndex не знал. Может быть, подскажете хорошую литературу по JavaScript с подробным описанием функций?

P.S. Замечание по коду. Используя выражение
var tr = input.parentNode.parentNode;
я получал сообщение об ошибке. Вывел результат tr и получил, что в результате такого выражения тип tr HTMLTableElement. Я убрал один parentNode и получил уже HTMLTableRowElement, т.е.
var tr = input.parentNode;
В этом случае функция работает так как и надо.
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2009, 18:17
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от Tankist
Может быть, подскажете хорошую литературу по JavaScript
Флэнаган 5 http://depositfiles.com/ru/files/ji7w211oc
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2009, 18:20
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

У вас input прямо в tr лежит? Вообще должно быть так:

<table>
     <tr>
        <td><input … /></td>
…


тогда первый раз parentNode выдаст td, а второй — tr.

Литературу не знаю, почти не читал книжек по JavaScript, на этом сайте есть несколько книг, возможно, в них есть это http://javascript.ru/book
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2009, 23:58
Новичок на форуме
Отправить личное сообщение для Tankist Посмотреть профиль Найти все сообщения от Tankist
 
Регистрация: 04.07.2009
Сообщений: 3

>>Octane: "Вообще должно быть так:"

Согласен с Вашим замечанием). Я просто для теста быстро накидывал, отсюда и строки без столбцов и однобуквенные переменные...

То, для чего тему открывал, сделал. Всем спасибо.
Ответить с цитированием
  #7 (permalink)  
Старый 03.07.2013, 12:03
Новичок на форуме
Отправить личное сообщение для Angelo4ek88 Посмотреть профиль Найти все сообщения от Angelo4ek88
 
Регистрация: 03.07.2013
Сообщений: 7

Помогите разобраться с похожей проблемой
Добрый день. проблема такая.
есть страничка 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>
Ответить с цитированием
  #8 (permalink)  
Старый 03.07.2013, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

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>

Последний раз редактировалось рони, 03.07.2013 в 15:21.
Ответить с цитированием
  #9 (permalink)  
Старый 03.07.2013, 13:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,118

Angelo4ek88,
зачем теги td в
Сообщение от Angelo4ek88
k.innerHTML = '<td><input type="checkbox" id=checkN"' + ((mass.length) - 1) + '"></td>';
?
Ответить с цитированием
  #10 (permalink)  
Старый 03.07.2013, 13:45
Новичок на форуме
Отправить личное сообщение для Angelo4ek88 Посмотреть профиль Найти все сообщения от Angelo4ek88
 
Регистрация: 03.07.2013
Сообщений: 7

Сообщение от рони Посмотреть сообщение
Angelo4ek88,
зачем теги td в
?
т.к. я в скриптах еще чайник, то не подумал что эти теги td могут быть и не нужны.. изначально скопировал со своего прошлого примера вместе с тегами.. работало))

но Спасибо огромное что отозвались на мой крик о помощи.. просто уже мозг вскипел а результата не было..
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41
ДИнамическое изминение таблицы Legi Элементы интерфейса 1 08.02.2009 04:10
Автоматическая подсветка строк таблицы mihha Элементы интерфейса 5 01.02.2009 01:28
Фиксированный заголовок таблицы ilshat Элементы интерфейса 6 20.12.2008 00:35
Динамическое изменение границ между столбцами таблицы srgg Элементы интерфейса 3 10.08.2008 14:40