Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> создание таблицы в JS 
:(
    Опции темы
Raily
Дата 23.3.2009, 17:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет
Я пишу следующий код:
Код

table=document.createElement('table');
row=document.createElement('tr');
cell=document.createElement('td');
    
cell.innerHTML="Hello!!!";
    
row.appendChild(cell);    
table.appendChild(row);    
 document.body.appendChild(table);


Но в браузере ничего не выводится? Что ещё надо дописать или что я делаю неправильно?
PM MAIL   Вверх
comtat
Дата 23.3.2009, 18:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71
Код

    var table=document.createElement('table');
    var tbody = document.createElement('tbody');
    var row=document.createElement('tr');
    var cell=document.createElement('td');
    
    cell.innerHTML = "Hello!!!";
    
    row.appendChild(cell);    
    tbody.appendChild(row);   
    table.appendChild(tbody);    
    document.body.appendChild(table);

под IE7 и FF3 работает, на остальных не проверял


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
Raily
Дата 24.3.2009, 09:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет
Спасибо!
PM MAIL   Вверх
Raily
Дата 24.3.2009, 10:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет
А ещё вопрос - а если у меня уже есть таблица
Код

var tb=document.getElementById('table_equip');
var trs=tb.getElementsByTagName('tr');


И я в неё хочу некоторые строки добавить, а некоторые убрать, убираю я строки кодом:
Код

trs[ii].style.display='none';


А как добавить новые строки в эту таблицу?
PM MAIL   Вверх
Sanchezzz
  Дата 24.3.2009, 12:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
вариант на mootools в как сделать без него

добавление 
Код

var tbl = $('tablefeald'); //получить id таблицы // без moo исп.  document.getElementById
    var countfeald = tbl.rows.length;
    var oRow = tbl.insertRow(countfeald);
    var oCell = oRow.insertCell(0);
    oCell.set('html','<input type="text" style="width: 140px" class="xInputText">'); // innerHtml(''); 
    var oCell = oRow.insertCell(1);
    oCell.set('html','<input type="text" style="width: 140px" name="c12" class="xInputText">');
    var oCell=  oRow.insertCell(2);
    oCell.set('html','<input type="text" class="xInputText" style="width: 50px" maxlength="4" value="0">');
    var oCell = oRow.insertCell(3);
    oCell.set('html',slectOptions);
    var oCell = oRow.insertCell(4);
    oCell.set('html','<a href="#">Удалить</a>');


//передаю в нее this и возрашяюсь к tr 
function deleteRowsFeald(_this){
$('tablefeald').deleteRow(_this.getParent().getParent().rowIndex);
}


при удаление тебе нужно из объекта таблицы вызвать функцию deleteRow и указать номер поля...




--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
comtat
Дата 24.3.2009, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71
Код

<html>
<style>
    .hidden {display:none;}
</style>
<script>
var tr_cnt = 0, table_id = 'tbl_1', tbody_id = 'tb_1';
function addTable(){
    var table=document.createElement('table');
    table.id = table_id;
    var tbody = document.createElement('tbody');
    tbody.id = tbody_id;
    var tr    = document.createElement('tr');
    tr.id = 'tr_'+tr_cnt;
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    td1.innerHTML = "Hello!!!";
    td2.innerHTML = "<a href='javascript:void(0);' onclick='addTr();'>+</a>&nbsp;<a href='javascript:void(0);' onclick='dropTr(\"tr_"+tr_cnt+"\");'>-</a>";    
    
    tr.appendChild(td1);    
    tr.appendChild(td2);  
    tbody.appendChild(tr);   
    table.appendChild(tbody);    
    document.body.appendChild(table);
    document.getElementById('link').className = 'hidden';
    tr_cnt++;
}
function addTr() {
    var tr    = document.createElement('tr');
    tr.id = 'tr_'+tr_cnt;
    var td1 = document.createElement('td');
    var td2 = document.createElement('td');
    td1.innerHTML = "Index - "+tr_cnt;
    td2.innerHTML = "<a href='javascript:void(0);' onclick='addTr();'>+</a>&nbsp;<a href='javascript:void(0);' onclick='dropTr(\"tr_"+tr_cnt+"\");'>-</a>";    
    
    tr.appendChild(td1);    
    tr.appendChild(td2);
    document.getElementById(tbody_id).appendChild(tr);   
    //document.getElementById(table_id).appendChild(tr);  
    tr_cnt++;
}
function dropTr(id) {
    document.getElementById(id).className = 'hidden'; 
}
</script>
<body>
<a id="link" href="javascript:void(0);" onclick="addTable();">add table</a>
</body>
</html>



--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
Raily
Дата 26.3.2009, 15:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет
Спасибо большое! Получилось!
Только вот ещё вопросик возник: у меня есть кнопка, при нажатии на которую я хочу, чтобы удалялась последняя строка таблицы, то есть чем больше будет нажатии на кнопку, тем меньше в таблице строк, я использую следующий код:
Код

var trs= document.getElementById('block').getElementsByTagName('tr');
trs[trs.length - 1].style.display= 'none';


Только у меня последняя строка удаляется только один раз, что я делаю не так?
PM MAIL   Вверх
bars80080
Дата 26.3.2009, 15:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315
Цитата(Raily @  26.3.2009,  14:25 Найти цитируемый пост)
Только у меня последняя строка удаляется только один раз, что я делаю не так? 

потому что display никуда строку не удаляет, а только скрывает её
надо использовать что-нибудь типа .removeNode:

Код

/**** в начало кода, чтоб в ФФ работало ***/
if(!window.ActiveXObject) {
    HTMLElement.prototype.removeNode = function(removeChildren) {
        if(Boolean(removeChildren)) { return this.parentNode.removeChild(this); }
        else {
            var r = document.createRange();
            r.selectNodeContents(this);
            return this.parentNode.replaceChild(r.extractContents(),this);
        }
    }
}
/*****   *****/



var trs= document.getElementById('block').getElementsByTagName('tr');
trs[trs.length - 1].removeNode(true);
PM MAIL WWW   Вверх
Raily
Дата 26.3.2009, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 146
Регистрация: 25.9.2006

Репутация: нет
Всего: нет
Спасибо огромное! 
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0488 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.