Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добавление строк в таблицу (https://javascript.ru/forum/misc/13357-dobavlenie-strok-v-tablicu.html)

MCTrane 27.11.2010 23:41
Добавление строк в таблицу
 
Сделал таким образом:
<table><tbody id=test>
<tr><td>текст</td></tr>
<tr><td>текст 2</td></tr>
</tbody>
<tr><td>текст 3</td></tr>
</table>


function test(){
document.getElementById('test').innerHTML+="<tr><td><input id=test2 type=text value=''></td></tr>";
}

Т.е. после строки "текст 2", добавляется строка с полем для ввода при вызове функции test()
Но столкнулся с проблемой: если я ввиду в поле для ввода текст и после ещё раз вызову функцию test(), то тот текст который я ввёл пропадал, как избавиться от такой проблемы?

dmitriymar 27.11.2010 23:50
писать в другие ячейки таблицы. а так пишеш в одну и туже. у тебя всё правильно работает-в соответствии с тем что ты запрограмировал

MCTrane 27.11.2010 23:54
Почему в одну и туже?
Дай код который ты предлагаешь?

monolithed 28.11.2010 00:01
MCTrane

Для добавления строк и столбцов в таблицу используйте специальные методы:
insertRow()/deleteRow(), insertCell()/deleteCell, moveRow()

MCTrane 28.11.2010 09:50
А как задать ID строки, столбцов или стиль?

monolithed 28.11.2010 10:06
Цитата:
Сообщение от MCTrane
А как задать ID строки, столбцов или стиль?
По порядковому номеру элемента

MCTrane 28.11.2010 10:13
По подробнее можно?

exec 28.11.2010 12:34 
var myTr = myTable.insertRow(3);	// четвёртая строка в myTable
myTr.id = "foo";			// присваиваем id
var myTd = myTr.insertCell(0);		// первая ячейка в myTr
myTd.className = "bar";			// присваиваем класс

MCTrane 28.11.2010 14:36
Спасибо, в мозиле и я думаю во всех браузерах работает, но как всегда IE всё настроение портит( Он строку добавляет, ид присваивает, но не делает вот это:
document.getElementById("test5").innerHTML="<td><input id=jk value=''></td><td>6</td>";

Вот мой код:
var nRow=document.getElementById("test").insertRow(-1);
nRow.id="test5";
document.getElementById("test5").innerHTML="<td><input id=jk value=''></td><td>6</td>";


Как добиться того чтобы в ИЕ этот код работал? Подскажите пожалуйста...

exec 28.11.2010 14:37
В IE с таблицами можно работать только через специальные методы: insertCell, insertRow и т.д.

MCTrane 28.11.2010 14:55
Я это знаю, никак нельзя обойтись без DOM?
Через JQuery никто не знает как сделать?

exec 28.11.2010 16:10
В jQuery такого вообще нет.

Я не понимаю, чем вам так противны методы для работы с таблицей?

MCTrane 28.11.2010 16:23
В Jquery можно так сделать, я нашёл скрипт, но не знаю как вызвать функцию jquery(
Видимо придёться через DOM делать, у меня просто 7 столбиков надо добавить строку, хочу чтобы скрипт выполнял как можно меньше функций.
Спасибо ещё раз.

monolithed 28.11.2010 18:03
Как вариант:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
td {border: 1px solid;}
</style>
<script type="text/javascript">
$(function(){
    var array = [1,2,3], i = array.length;
    $('body').each(function(){
        $(this).append('<a href="#">click</a>').one('click', function(){  //Создадим ссылку
            $(this).append('<table><tr/></table>'); //Создадим каркас
            while(i--){
                //Добвим строки, количество которых равно длине массива
                $('table tbody > tr').append('<td>'+array[i]+'</td>'); 
            }
            $('table tbody > tr').append('<td>4</td>'); //Добавим еще одну строку
            $('table tr > td:eq(1)').after('<td>5</td>'); //Добавим еще одну строку (третьей по счету будет)
            $('table').clone(true).insertAfter('table'); //Склонируем первую таблицу и вставим после второй
           });
      });  
});
</script>

MCTrane 28.11.2010 18:18
Спасибо, попробую)


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