javascript : Delete table row gives error
<p>I have a table in which i can add or delete rows dynamically at run time, after that i want to generate a string by combining all values of input or drop down fields. The problem is when i delete a table row some where inside the table, then string does not generates, giving a null value.
PS: Sting generate successfully if i don't delete row or delete it from the end.</p>

<p>javascript code is</p>

<pre><code>function insertRowItemsInDataTable(tableID){

  var tbl = document.getElementById(tableID);
  var lastRow = tbl.rows.length;
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  var id = tableID; 
  var cell0 = row.insertCell(0);
  var sel0 = document.createElement('select');

  sel0.name = tableID + 'Row' + iteration+'0';
  sel0.id = tableID + 'Row' + iteration+'0';
  sel0.options[0] = new Option('One', '1');
  sel0.options[1] = new Option('Two', '2');
  sel0.options[2] = new Option('Three', '3');
  cell0.appendChild(sel0); 


  var cell1 = row.insertCell(1);
  var sel1 = document.createElement('select');

  sel1.name = tableID +'Row' + iteration+'1';
  sel1.id = tableID +'Row' + iteration+'1';
  sel1.options[0] = new Option('Service1', 'Service1');
  sel1.options[1] = new Option(' Service2', 'Service2');


  cell1.appendChild(sel1); 

  var cell2 = row.insertCell(2);

  var sel2 = document.createElement('select');
  sel2.name = tableID +'Row' + iteration+ '2';
  sel2.id = tableID +'Row' + iteration+ '2';
  sel2.options[0] = new Option('Group1', 'Group1');
  sel2.options[1] = new Option('Group2', 'Group2');
  cell2.appendChild(sel2); 

  var cell3 = row.insertCell(3);
  var sel3 = document.createElement('select');

  sel3.name = tableID +'Row' + iteration + '3';
  sel3.id = tableID +'Row' + iteration + '3';
  sel3.options[0] = new Option('=', '=');
  sel3.options[1] = new Option('&lt;&gt;', '&amp;lt;&amp;gt;');
  sel3.options[2] = new Option('&lt;=', '&amp;lt;=');
  sel3.options[3] = new Option('&gt;=', '&amp;gt;=;');
  cell3.appendChild(sel3); 

  var cell4 = row.insertCell(4);
  var sel4 = document.createElement('select');

  sel4.name = tableID +'Row' + iteration + '4';
  sel4.id = tableID +'Row' + iteration + '4';
  sel4.options[0] = new Option('Finance1', 'Finance1');
  sel4.options[1] = new Option('Finance2', 'Finance2');
  cell4.appendChild(sel4); 

  var cell5 = row.insertCell(5);
  var rad0 = document.createElement('input');

  rad0.type = "radio";
  rad0.checked = true;
  rad0.value = "And";
  rad0.name = tableID +'Row' + iteration + '5';
  rad0.id = tableID +'Row' + iteration + '5';
  cell5.appendChild(rad0); 

  var cell6 = row.insertCell(6);
  var rad1 = document.createElement('input');

  rad1.type = "radio";
  rad1.label = "temp";
  rad1.value = "Or";
  rad1.name = tableID +'Row' + iteration + '5';
  rad1.id = tableID +'Row' + iteration + '5';
  cell6.appendChild(rad1); 

  var cell7 = row.insertCell(7);
  var btn0 = document.createElement('button');
  var lbl = document.createElement('label');

  lbl.text = "And";
  addBtnText=document.createTextNode("+");
  btn0.appendChild(addBtnText);  //adding text to '+' button
  btn0.name = tableID +'Row' + iteration + '6';
  btn0.id = tableID +'Row' + iteration + '6';
  btn0.onclick = function(e){addRow(tableID);};
  cell7.appendChild(btn0); 


  var cell8 = row.insertCell(8);
  var btn1 = document.createElement('button');

  delBtnText=document.createTextNode(" - ");
  btn1.appendChild(delBtnText);
  btn1.name = tableID +'Row' + iteration + '7';
  btn1.id = tableID +'Row' + iteration + '7';
  btn1.onclick = function(e){delRow(tableID,this.id);};
  cell8.appendChild(btn1); 

  }
</code></pre>

<p>Firebug gives: </p>

<blockquote>
  <p>document.getElementById("dataTableRow" + row + col) is null [Break On
  This Error]   </p>
  
  <p>if(document.getElementById("dataTableRow"+row+col).type != "radio"){</p>
</blockquote>

<p>//EX: table have row#1,2,3,4,5 and i delete row 2, error aries, but if i delete row 5,it works fine.</p>
