Javascript-форум (https://javascript.ru/forum/)
-   Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)
-   -   Все тот же innerHTML и IE (работа с динамической таблицей HTML5) (https://javascript.ru/forum/css-html-internet-explorer/13848-vse-tot-zhe-innerhtml-i-ie-rabota-s-dinamicheskojj-tablicejj-html5.html)

abstract 16.12.2010 13:25

Все тот же 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);//отладка!!! Стереть 
}

Kolyaj 16.12.2010 13:34

http://innerhtml.ru/

abstract 16.12.2010 14:34

Спасибо! Так и думал... так это теперь придется парсить предыдущую строку и поэлементно,поатрибутно вносить все теги и атрибуты? Но если учесть, что таблица произвольная...это наверное километры кода...Есть, какая-нибудь хитрость на сей счет?

abstract 16.12.2010 14:37

Думаю попробовать перебрать все TD в предыдущей строке и newTD.innerHTML=oldTD.innerHTML...

abstract 16.12.2010 17:18

В результате получилось следующее:
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);//отладка!!! Стереть 
}

kadabrik 16.12.2010 17:31

jQuery предоставляет множество кроссбраузерных методов по манипуляции с DOM. Если нет аллергии на внешние библиотеки то лучше использовать его.

abstract 16.12.2010 17:37

И сколько лишних кило в таком случае будет гоняться ?

kadabrik 16.12.2010 18:19

последняя версия 26kb


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