Removing a row from the table and re indexing the table

Question

I'm trying to create a button to put in the each row of a table to remove that row

the table row it self will be created by javascript on the runtime

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='<a href="" onclick="removerow('+rowCount+'); return   false;">deleterow</a>';

   var cell2 = row.insertCell(1);
   cell2.innerHTML='price';

   var cell3 = row.insertCell(2);
   cell3.innerHTML='name';

}

here is my removing row function

function removerow(i){      
    var table = document.getElementById('baskettbl');
    table.deleteRow(i);
 }

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

   var rowCount = table.rows.length;
   var row = table.insertRow(rowCount);
   var cell2 = row.insertCell(0);
   cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return false; />

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]

so i thought i should re index all of the rows by simply

 function removerow(i){

     var table = document.getElementById('baskettbl');
        table.deleteRow(i);
     }
     var rowCount = table.rows.length;

      for(i=0 , i<= rowCount ; i++){
     var cell = 'cell'+i;
      cell.innerHTML='<a href="" onclick="removerow('+0+'); return false; />  
      }

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 :

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

var cell2 = row.insertCell(0);

2.i findout about rowIndex property which apparently returns the row index

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

var cell2 = row.insertCell(0);
cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); />

and also i use dreamweaver cs5 and it doesn't seems to recognize rowIndex

Answer 1

Then get the index dynamically and don't set it when you create it:

function createrow(){  
   document.getElementById('totaltd').innerHTML = total;

   var table = document.getElementById('baskettbl'),
       rowCount = table.rows.length,
       row = table.insertRow(rowCount),
       cell = row.insertCell(0),
       a = document.createElement('a');

   a.href = '#';
   a.innerHTML = 'deleterow';
   a.onclick = function() {
       // `this` refers to the `a` element.
       removerow(this.parentNode.parentNode.rowIndex);
       return false;
   };

   cell.appendChild(a);

   cell = row.insertCell(1);
   cell.innerHTML='price';

   cell = row.insertCell(2);
   cell.innerHTML='name';

   // still needed for IE memory leak? Don't know...
   table = row = cell = a = null;
};

Setting the click event handler via JavaScript is more readable anyway (well, you could also just use this.parentNode.... in the HTML string).

---

The code above should do what you want (if you have questions about it, just comment). Nevertheless I wanted to answer your questions:

how can i set the attribute like id to the created td so i can get their values later?

An important thing to know is that there is a difference between HTML attributes and DOM properties. These answers describe it quite well, although it is originally about jQuery (but that does not matter).

Anyway, you already know how to set the innerHTML and you can do so similar for id:

cell.id = "something";

Have a look at the DOM element reference.

but how can i pass the clicked row 'this' to the the function

I more or less showed this in the code above. Inside the event handler, this refers to the element you bound the event to. We know that it is an a element which is a child of a td element, which itself is a child of a tr element. So to get the corresponding row, we can access this.parentNode.parentNode.

---

For further information regarding JavaScript, have a look at the javascript tag information page. There you will find a lot of useful links to introductions about various JavaScript related topics.
Especially have a look at the articles about event handling at quirksmode.org.

Answer 2

Try this I hope this helps you.

 function createrow(){

       document.getElementById('totaltd').innerHTML = total;

       var table = document.getElementById('baskettbl');
       var rowCount = table.rows.length;
       var row = table.insertRow(rowCount);
       row.id = "row_"+rowCount;
       var cell2 = row.insertCell(0);
       cell2.innerHTML='<a href="" onclick="removerow('+rowCount+'); return   false;">deleterow</a>';

       var cell2 = row.insertCell(1);
       cell2.innerHTML='price';

       var cell3 = row.insertCell(2);
       cell3.innerHTML='name';

    }




function removerow(i){      
    var table = document.getElementById('baskettbl');
    table.removeChild(document.getElementById("row_"+i));
 }