Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.12.2010, 13:25
Аспирант
Отправить личное сообщение для abstract Посмотреть профиль Найти все сообщения от abstract
 
Регистрация: 20.09.2010
Сообщений: 58

Все тот же innerHTML и IE (работа с динамической таблицей HTML5)
Доброго времени суток всем! Друзья, подскажите пожалуйста что за ерунда творится с этим InnerHTML в эксплорере? Неоднократно слышал о неоднозначной работе этого свойства, да и у самого такое работает через раз. На текущий момент стоит простая задача добавить строку по месту ниже строки, в которой осуществился вызов. Структура создаваемой строки (кол-во ячеек и их свойства) должна быть аналогична существующим строкам. Залез на сайт W3C почитал спецификацию HTML5 по данной теме и жутко обрадовался, ведь все обещало минимальный объем кода и максимум простоты. Набросал, протестил в Мозилле и был счастлив, все работало. Начал проверку в IE8 и в Safari. Про сафари не здесь, а в IE8 он пока не понимает строку с newRow.innerHTML=this.Row.innerHTML;
Что имеем:
Таблица (в общем случае произвольная ):

<table>
<tbody>
        
        <tr>
<input name="id" value="2" type="hidden">
<input name="" value="электрическая энергия" type="hidden">
<input name="" value="Количество оборудованных приборами вводов всего,в том числе:полученной со стороны" type="hidden">
<td width="149"><input style="width: 100%;" name="" value="1" type="text"></td>
<td width="140"><input style="width: 100%;" name="" value="Меркурий 230" type="text"></td>
<td width="149"><input style="width: 100%;" name="" value="0.5s" type="text"></td>
<td width="">   <input style="width: 100%;" name="" value="Ну очень хороший прибор..." type="text"></td>
<td width="16"><input style="width: auto;" title="добавить" src="images/icons/16x16/add.png" onclick="return addline(this);" type="image"></td>
<td width="16"><input style="width: auto;" title="удалить" src="images/icons/16x16/remove.png" onclick="return rmline(this);" type="image"></td>
</tr>
</tbody>
</table>

Скрипт:
function addline(element)
{
	var thisRow;
	thisRow=element;
	while (thisRow.tagName!='TR'){
		   thisRow=thisRow.parentNode;
	} 
	var cellsCount = thisRow.cells.length;
	
	var table=element;
	while (table.tagName!='TABLE'){
		table=table.parentNode;
	} 
    var newrow = table.insertRow(thisRow.rowIndex+1);


    
    
    
    
    
    
 newrow.innerHTML=thisRow.innerHTML;//innerHTML  работает в Мозилле, не работает в експлорере;

    var inputs=newrow.getElementsByTagName('INPUT');
    var currentInput;

    						
    var input;
    for(i=0;i<inputs.length;i++){
    	input=inputs[i];
    	if (input.type=='hidden'){
    		if(input.name=='id'){
    			input.value='_inserted';
    		}
    	}else if(input.type!=='image'){
    			input.value="";
    		
    		 }
    }*/
    
    alert(table.innerHTML);//отладка!!! Стереть 
}
Ответить с цитированием
  #2 (permalink)  
Старый 16.12.2010, 13:34
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

http://innerhtml.ru/
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2010, 14:34
Аспирант
Отправить личное сообщение для abstract Посмотреть профиль Найти все сообщения от abstract
 
Регистрация: 20.09.2010
Сообщений: 58

Спасибо! Так и думал... так это теперь придется парсить предыдущую строку и поэлементно,поатрибутно вносить все теги и атрибуты? Но если учесть, что таблица произвольная...это наверное километры кода...Есть, какая-нибудь хитрость на сей счет?
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2010, 14:37
Аспирант
Отправить личное сообщение для abstract Посмотреть профиль Найти все сообщения от abstract
 
Регистрация: 20.09.2010
Сообщений: 58

Думаю попробовать перебрать все TD в предыдущей строке и newTD.innerHTML=oldTD.innerHTML...
Ответить с цитированием
  #5 (permalink)  
Старый 16.12.2010, 17:18
Аспирант
Отправить личное сообщение для abstract Посмотреть профиль Найти все сообщения от abstract
 
Регистрация: 20.09.2010
Сообщений: 58

В результате получилось следующее:
function addline(element)
{
	var thisRow;
	thisRow=element;
	while (thisRow.tagName!='TR'){
		   thisRow=thisRow.parentNode;
	} 
	var cellsCount = thisRow.cells.length;
	
	var table=element;
	while (table.tagName!='TABLE'){
		table=table.parentNode;
	}
    var newRow = table.insertRow(thisRow.rowIndex+1);
    var hiddeninputs=thisRow.getElementsByTagName('INPUT');
    	for (i=0;i<hiddeninputs.length;i++){
    		if(hiddeninputs[i].type=='hidden'){
    			newRow.appendChild(hiddeninputs[i].cloneNode(true));
    		}
    	}
    
    var tds=thisRow.cells;
    for (i=0;i<tds.length;i++){
    	newcell=newRow.insertCell(i);
    	newcell.innerHTML=tds[i].innerHTML;
	}
    var inputs=newRow.getElementsByTagName('INPUT');
    var currentInput;
    					
    var input;
    for(i=0;i<inputs.length;i++){
    	input=inputs[i];
    	if (input.type=='hidden'){
    		if(input.name=='id'){
    			input.value='_inserted';
    		}
    	}else if(input.type!=='image'){
    			input.value="";
    		
    		 }
    }
    
    alert(table.innerHTML);//отладка!!! Стереть 
}
Ответить с цитированием
  #6 (permalink)  
Старый 16.12.2010, 17:31
Аватар для kadabrik
Кандидат Javascript-наук
Отправить личное сообщение для kadabrik Посмотреть профиль Найти все сообщения от kadabrik
 
Регистрация: 10.12.2010
Сообщений: 114

jQuery предоставляет множество кроссбраузерных методов по манипуляции с DOM. Если нет аллергии на внешние библиотеки то лучше использовать его.
Ответить с цитированием
  #7 (permalink)  
Старый 16.12.2010, 17:37
Аспирант
Отправить личное сообщение для abstract Посмотреть профиль Найти все сообщения от abstract
 
Регистрация: 20.09.2010
Сообщений: 58

И сколько лишних кило в таком случае будет гоняться ?
Ответить с цитированием
  #8 (permalink)  
Старый 16.12.2010, 18:19
Аватар для kadabrik
Кандидат Javascript-наук
Отправить личное сообщение для kadabrik Посмотреть профиль Найти все сообщения от kadabrik
 
Регистрация: 10.12.2010
Сообщений: 114

последняя версия 26kb
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37