Dynamically add and delete tables using JavaScript

:


Page code:
<Table id = "tabBill">
<Tr>
<Td colspan = "2" align = "center">
<Input id = "btnAddOne" onclick = "Addtr ();" type = "button" value = "add item"/>
<Input id = "btnRemoveOne" onclick = "Removetr ();" type = "button" value = ""/>
</Td>
</Tr>
<Tr>
<Td>
Fault Code & nbsp; <asp: DropDownList ID = "ddlFailureCode1" Width = "196px" runat = "server"/>
</Td>
<Td>
Fault count & nbsp; <asp: TextBox ID = "txtFailureCodeAmount1" runat = "server"/>
</Td>
</Tr>
</Table>

JavaScript code:
<Script type = "text/javascript" language = "javascript">
Var I = 1;
Var sub = true;

// Add Row Method
Function Addtr (){
I = tabBill. rows. length;
Var ii = tabBill. rows. length;
Var newTr = tabBill. insertRow (-1 );
Var newTd1 = newTr. insertCell (-1 );
Var newTd2 = newTr. insertCell (-1 );
// Set the column content and attributes
NewTd1.innerHTML = "fault code & nbsp; <select id = 'ddlfailurecode" + ii + "'style = 'width: 196px '> </select> ";
NewTd2.innerHTML = "Number of faults & nbsp; <input type = 'text' id = 'txtfailurecodeamount" + ii + "'class = 'tbstyle'/> ";
AddOptions ();
}

// Row deletion method
Function Removetr (){
If (tabBill. rows. length> 2)
{
TabBill. deleteRow (tabBill. rows. length-1 );
I --;
}
}
 
// Add Option
Function AddOptions (){
Var options = document. getElementById ("ddlFailureCode1"). options;
For (var m = 0; m <options. length; m ++ ){
Var newOption = new Option (options [m]. innerText, options [m]. value );
Document. getElementById ("ddlFailureCode" + I). add (newOption );
}
}

// Obtain the value in the form
Function SaveHF (){
Var subStr = "";
Var count = tabBill. rows. length-1;
For (var n = 1; n <= count; n ++ ){
Var failureCode = document. getElementById ("ddlFailureCode" + n). value;
Var failureCodeAmount = document. getElementById ("txtFailureCodeAmount" + n). value;
SubStr + = failureCode + "|" + failureCodeAmount + "~ ";
}
// Use the form field to save the obtained data. "hfvalues" indicates the ID of the form field.
Document. getElementById ("hfvalues"). value = subStr;
}
</Script>