Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > динамическое добавление элементов

Автор: Гость_гость 2.12.2005, 23:14

Идея такова. Из MySQL читаются данные и загоняются в таблицу... при желании должна быть возможность добавить в БД свои новые значения.... Все работает, но проблема в том, что при добавлении новой строки для заполнения ее данными строка для ввода данных пользователя оказывается выше самой таблицы... хотелось бы, чтобы строка находилась на своем законном месте.... Следующий пример демонстрирует упрощенный код.
В нем выводятся данные из БД в табличку и создается строка с тектовыми формами для каждого столбца, ожидающая данных от пользователя... также создается кнопка для добавления новых строк, привязанная к коду, который в данном примере ничего не делает.... кроме того, что почему то старая новая строка по неизвестным причинам оказывается ВЫШЕ таблицы... Из-за чего такое может происходить?

Код


...
<script LANGUAGE="JavaScript">

function AddNewLine()
{
//ради интереса ничего не трогаем... просто перезаписываем то, что прочитали

   t=document.getElementById('test').innerHTML; 
   document.getElementById('test').innerHTML=t; 
}
</SCRIPT>


...
<?php
    ....
    echo "<TABLE>";

while(....){ //пока не кончатся записи в таблице из БД MySQL
    for($i=0;$<4;$i++); 
{
      echo "<TD>";
      echo "data=".$data[i];
      echo "</TD>";
}//for $i
}

    echo "<SPAN ID='test'><TR>";
  
    for($i=0;$<4;$i++); 
{
      echo "<TD>";
      echo "<INPUT type=\"text\">text</INPUT>";
      echo "</TD";
}//for $i
   
   echo "</TR></SPAN></TABLE>";

   echo "<BUTTON onclick=\"AddNewLine()\";>нажми меня</BUTTON>";
?>

Автор: Guest 2.12.2005, 23:34

забыл добавить... использую IE 6.0

вот еще более простой пример неверно работающего кода:

Код



<HTML>

<HEAD>
</HEAD>

<BODY bgcolor=#e9e9e9>

<script language="JavaScript">

function AddNewLine()
{
    t=document.getElementById('test1').innerHTML; // получаем HTML-код таблицы
    document.getElementById('test1').innerHTML=t; //
}
</script>

<TABLE border=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR>


<SPAN ID="test1">
<TR>
<TD><INPUT type=text></tD>
<TD><INPUT type=text></tD>
<TD><INPUT type=text></tD>
<TD><INPUT type=text></tD>
<TD><INPUT type=text></tD>
</TR>
</SPAN>

</TABLE>
<BUTTON onclick="AddNewLine();">Добавить</BUTTON>

</BODY>
</HTML>

Автор: Ciber SLasH 3.12.2005, 00:24

Подход к добавлению строки вообще не правильный.
Поиск по форуму по слову insertRow выдал кучу результатов: http://forum.vingrad.ru/index.php?act=Search&CODE=show&searchid=f90379485aecf8f8cf54d0bfe5eaef81&search_in=posts&result_type=topics&highlite=insertrow
чаще юзай поиск...

Вот один из постов, в котором как раз решение по добавлению строки в таблицу: http://forum.vingrad.ru/index.php?showtopic=52796&view=findpost&p=417587

Автор: Guest 3.12.2005, 00:41

А можно узнать почему:

Цитата

Подход к добавлению строки вообще не правильный.

А насчет поиска согласен, но лишь частично - т.к. в JavaScript я только начинающий, про insertRow как то не подумалось...
Вопрос в догонку - почему мой код работает неправильно? я грешу на то, что этот innerHTML как то странно себя ведет... я полагал, что при присвоении в

Код


document.getElementById('test1').innerHTML=t;

на место прежнего кода поместиться новый, но если бы все было так просто... дело в том, что если ручками прописать то, что должно вставится при выполнении этого innerHTML, то все получается прекрасно, а с ним - нарушается форматирование документа. Что-то тут явно не так.

p.s. поиск по innerHTML почти ничего не дал, непонятно как он вставляет код в промежутке тега <SPAN>...

Автор: Ciber SLasH 3.12.2005, 01:04

Код

    t=document.getElementById('test1').innerHTML; // получаем HTML-код таблицы
    document.getElementById('test1').innerHTML=t; //

Попробую объяснить то, что ты пытаешся сделать в этом коде:
1) переменной t ты присвоил HTML-код который содержит элемент в id=test1
2) ты пытаешся в этот же элемент запихнуть, самого себя

Автор: GIK 3.12.2005, 12:26

Добавить эллемент в таблицу можно с помощью createElement(N)
Пример с добавлением из текстовых полей.

Код


<html>
 <head>
  <script type="text/javascript">
  <!--   
         function gen1()
 {  var idform=document.getElementById("f2");
    var tbody = idform.firstChild.firstChild;

    var textVal1 = document.getElementById("f1").elements[0].getAttribute("value");
    var textVal2 = document.getElementById("f1").elements[1].getAttribute("value");
    var textVal3 = document.getElementById("f1").elements[2].getAttribute("value");
     var tr1 = document.createElement("tr");
     var td1 = document.createElement("td");
     var td2 = document.createElement("td"); 
     var td3 = document.createElement("td");
     var textNod1 = document.createTextNode(textVal1);
     var textNod2 = document.createTextNode(textVal2);
     var textNod3 = document.createTextNode(textVal3);
 
   
    td1.appendChild(textNod1);
    td2.appendChild(textNod2);
    td3.appendChild(textNod3); 
     tr1.appendChild(td1);
     tr1.appendChild(td2);
     tr1.appendChild(td3);
    tbody.appendChild(tr1);
  } 
   
   //-->
  </script>
 </head>
<body>
  <input type="button" onclick="gen1()" value="Изменить"><br>
 <form id="f1">
 <input type="text" name="n1" value="текст1"><br>
 <input type="text" name="n2" value="текст2"><br>
 <input type="text" name="n3" value="текст3"><br>
 </form>
 <form id="f2">
    <table border=3>
     <tr><td>Первый столбец</td><td>Второй столбец</td><td>Третий столбец</td></tr>  
    </table>
 </form>
</body>
</html>

Автор: Guest 3.12.2005, 23:13

Цитата

Попробую объяснить то, что ты пытаешся сделать в этом коде:
1) переменной t ты присвоил HTML-код который содержит элемент в id=test1

Вообще то я сделал это вполне намерянно - для того, чтобы показать, что по сути код никак измениться не должен, т.к. вставляем мы ТО ЖЕ САМОЕ, что и читаем... однако даже при этой операции, когда ничего изменится не должно - форматирование документа нарушается, а именно это меня и не устраивает... попробуйте выполнить этот пример в IE 6.0 и вы увидите, что я имею ввиду.

to GIK

спасибо большое, буду разбираться, так оно и должно работать smile

P.S. и все таки насчет innerHTML - поясните, если можно, что конкретно она делает и почему все таки нарушается форматирование документа, если сам документ вроде изменяться не должен?

Автор: Ciber SLasH 4.12.2005, 02:14

Вот инфа на MSDN-е по innerHTML: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp