Динамично добавяне на ред в таблица, чрез innerHTML срещу DOM срещу cloneNode

Мартин Петров

Целта на този документ е да предостави примери за добавяне на редове в съществуваща таблица. Всичките примери извършват едно и също,но по различни начини или техники. При вземане на решение коя техника да бъде използвана, може да искате да разгледате различните техники за динамично манипулиране на уеб страница.

През март 2006 година, Chriss Heilmann писа скриптове от DHTML към DOM, което разглежда много аспекти на старите DHTML техники срещу DOM. Това доведе до много дискусии в мрежата особено по отношение на темата за innerHTML срещу DOM.

По принцип ще намерите, че innerHTML техниката ще бъде изпълнена най- добре. Обаче, когато добавите редове на съществуваща таблица, някой DOM методи ще бъдат използвани което означава, че се губи ефективността която бихме имали ако създадем таблица само с innerHTML. Причината поради коят оказвам, че е необходимо да се използват DOM методи е че ако се опитате да съединит стринг като my new row в innerHTML, той няма да работи в Internet Explorer. И така какво може да се направи в такъв случай: Примерът "Пример 1: innerhtml" по- долу, използва insertRow и InserCell.

Може да кажете с един поглед кои от кодовете има най- кратък код. "Пример 3: Dom Clone" изглежда най- простичък и ако не планирате да променяте каквото и да е от съдържанието на ред на ред. Ако поискате да промените стойностите тогава трябва да направите връзка към елемнтите на клонирания нод. "Пример 1: innerHTML" ще бъде по- лесен за модифициране които от своя страна също да променя стойности от ред на ред. Проблемът тук е че кодът които ще се получи ще бъде по- сложен. "Пример 2: DOM" е най- дългия код, но понеже всичко е разделено в него редактирането от ред на ред става най- лесно.

Пример 1: innerHTML

DOM таблица използваща innerHTML методи за да запълни клетките

tblInnerHTML Хедър

JavaScript source

function addRowInnerHTML(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  newCell0.innerHTML = '<input type="input" value="cell 0 - text box" style="color: blue;" />';
  var newCell1 = newRow.insertCell(1);
  newCell1.innerHTML = 'cell 1 - just plain text';
}

Пример 2: DOM

DOM таблица използваща DOM за да запълни клетките

tblDOM Хедър

JavaScript source

function addRowDOM(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newRow = tblBody.insertRow(-1);
  var newCell0 = newRow.insertCell(0);
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.value = 'cell 0 - text box';
  newInput.style.color = 'blue';
  newCell0.appendChild(newInput);
  var newCell1 = newRow.insertCell(1);
  newCell1.appendChild(document.createTextNode('cell 1 - just plain text'));
}

Пример 3: DOM Clone

cloneNode за клониране на съществуващ ред

tblClone Хедър
клетка 1 - текст

JavaScript source

function addRowClone(tblId)
{
  var tblBody = document.getElementById(tblId).tBodies[0];
  var newNode = tblBody.rows[0].cloneNode(true);
  tblBody.appendChild(newNode);
}