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>