Adding and deleting multiple selected rows in a table using JavaScript

• Download source code - 2.36 Kb

Usage

Take a hidden control on the webpage ("hdhidden") and set its default value to 1 and runat = server. 1 is added to its value when a new row is added in a table but does not change when a row is deleted from the table. Following are the two functions which perform addition and deletion of rows in a table.

<script language="javascript"> 
function deleteTableRows() 
{
    var counts=parseInt(document.all("hdhidden").value);
    //variable counts will contains the value of hidden control 
    //("hdhidden")
    var i;
    var a=0;
    for(i=1;i<counts;i++)
    {
        itemCheck="chk_"+i; 
        //itemCheck contians the checkboxes id. 
        if(document.all[itemCheck]!=undefined) 
        { 
            //if itemCheck is not undefined then adding 1 in "a" 
            //value
            a = a + 1; 
            //check whether is checkbox is checked or not
            if(document.all[itemCheck].checked==true) 
            { 
                //if chekbox is checked then compare 
                //"a" with "i"
                if(a!=i) 
                {
                    //if "a" is not equals to i then delete row 
                    //from the table on the basis of "a" value.
                    tblvalue.deleteRow(a); 
                } 
                else 
                {
                    //else delete row from the table on the 
                    //basis of "i" value.
                    tblvalue.deleteRow(i); 
                } 
                //less 1 from "i" and "a" values.
                i = parseInt(i) - 1;
                a = a - 1; 
            }
        }
    }
    return false; 
}

function AddItem() 
{ 
    var counts=parseInt(document.all("hdhidden").value); 
    //varibale counts will contains the value 
    //of hidden control (hdhidden)
    var Row,Cell;
    var CurrentPosition=parseInt(counts);
    //asigned value of variable "counts" to varibale "CurrentPosition" 
    Row = window.tblvalue.insertRow();
    Cell = Row.insertCell(); 
    //insert a cell in a row;
    //insert a checkbox in a cell with the name 
    //"chk_" as prefix + its current positon 
    //so thant checkbox has unique id
    Cell.innerHTML="<input type=checkbox name=chk_" + 
       CurrentPosition +" id=chkbox_"+ CurrentPosition+"; value='C'>"; 
    Cell = Row.insertCell(); 
    //insert another cell to row
    //insert a textbox in a cell with the name 
    //"txtval1_" as prefix + its current position
    Cell.innerHTML="<input style=Font-size=11; type=Text name=txtval1_" 
                    + CurrentPosition +" id=txtval1_"+ CurrentPosition+>"; 
    //insert another cell in a row
    Cell = Row.insertCell(); 
    //insert a textbox in a cell with the name 
    //"txtval2_" as prefix + its current position
    Cell.innerHTML="<input style=Font-size=11; type=Text name=txtval2_" + 
                        CurrentPosition +" id=txtval2_"+ CurrentPosition+>"; 
    //update the value of hidden control (hdhidden) by adding 1 
    //to its previous value
    document.all("hdhidden").value = parseInt(counts) + 1; 
    return false; 
} 
</script>