title: Removing a row from the table and re indexing the table
body: <p>I'm trying to create a button to put in the each row of a table to remove that row</p>
  
  <p>the table row it self will be created by javascript on the runtime</p>
  
  <pre><code>function createrow(){
  
     document.getElementById('totaltd').innerHTML = total;
  
     var table = document.getElementById('baskettbl');
     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell2 = row.insertCell(0);
     cell2.innerHTML='&lt;a href="" onclick="removerow('+rowCount+'); return   false;"&gt;deleterow&lt;/a&gt;';
  
     var cell2 = row.insertCell(1);
     cell2.innerHTML='price';
  
     var cell3 = row.insertCell(2);
     cell3.innerHTML='name';
  
  }
  </code></pre>
  
  <p>here is my removing row function </p>
  
  <pre><code>function removerow(i){      
      var table = document.getElementById('baskettbl');
      table.deleteRow(i);
   }
  </code></pre>
  
  <p>my problem is when i remove a row if that row is in the middle of my table it will mess up the indexing cuz i define removerow argument when i creat each row </p>
  
  <pre><code>   var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);
     var cell2 = row.insertCell(0);
     cell2.innerHTML='&lt;a href="" onclick="removerow('+rowCount+'); return false; /&gt;
  </code></pre>
  
  <p>like if i have 5 rows and and i remove row[3] i will end up with 4 rows but my last row button is still going to pass 5 to the removerow function and of course there is no row[5] </p>
  
  <p>so i thought i should re index all of the rows by simply </p>
  
  <pre><code> function removerow(i){
  
       var table = document.getElementById('baskettbl');
          table.deleteRow(i);
       }
       var rowCount = table.rows.length;
  
        for(i=0 , i&lt;= rowCount ; i++){
       var cell = 'cell'+i;
        cell.innerHTML='&lt;a href="" onclick="removerow('+0+'); return false; /&gt;  
        }
  </code></pre>
  
  <p>but i need to set the td id in the numeric whey so i can change their innerhtml like this
  so here is my questions :</p>
  
  <p>1.how can i set the attribute like id to the created td so i can get their values later? here is how i create them</p>
  
  <pre><code>var cell2 = row.insertCell(0);
  </code></pre>
  
  <p>2.i findout about rowIndex property which apparently returns the row index </p>
  
  <p>function removerow(x)
  {
  alert("Row index is: " + x.rowIndex);
  }
  so that is going to make my job easy and i don't need to recreate all the indexes but how can i pass the clicked row 'this' to the the function ? here is how i pass the index </p>
  
  <pre><code>var cell2 = row.insertCell(0);
  cell2.innerHTML='&lt;a href="" onclick="removerow('+rowCount+'); /&gt;
  </code></pre>
  
  <p>and also i use dreamweaver cs5 and it doesn't seems to recognize rowIndex </p>