I want To add Multiple Text Boxes In panel with Javascript .. But it is not Working Properly Pls Help Me
this my script
var count = "1";
function ADDRow(in_tbl_name) {
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 2
var td1 = document.createElement("TD")
var strHtml2 = "<input type=\"text\" name=\"quantity2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
td1.innerHTML = strHtml2.replace(/!count!/g, count);
// create table cell 3
var td2 = document.createElement("TD")
var strHtml3 = "<input type=\"text\" name=\"Length2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
td2.innerHTML = strHtml3.replace(/!count!/g, count);
// create table cell 4
var td3 = document.createElement("TD")
var strHtml4 = "<input type=\"text\" name=\"Width2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
td2.innerHTML = strHtml4.replace(/!count!/g, count);
// create table cell 5
var td4 = document.createElement("TD")
var strHtml5 = "<input type=\"text\" name=\"Depth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\"/>";
td2.innerHTML = strHtml5.replace(/!count!/g, count);
// create table cell 6
var td5 = document.createElement("TD")
var strHtml6 = "<input type=\"text\" name=\"azimuth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
td3.innerHTML = strHtml6.replace(/!count!/g, count);
// create table cell 7
var td6 = document.createElement("TD")
var strHtml7 = "<input type=\"text\" name=\"elevation2\" style=\"width:140px;\" size=\"20\" maxlength=\"30\" />";
td4.innerHTML = strHtml7.replace(/!count!/g, count);
// create table cell 8
var td7 = document.createElement("TD")
var strHtml8 = "<input type=\"text\" name=\"position2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
td5.innerHTML = strHtml8.replace(/!count!/g, count);
// create table cell 9
var td8 = document.createElement("TD")
var strHtml9 = "<img src=\"images/Close_Box_Red.png\" onclick=\"delRow2()\" style=\"width: 22px; cursor: pointer;\" />";
td6.innerHTML = strHtml9.replace(/!count!/g, count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
count = parseInt(count) + 1;
// add to count variable
// append row to table
tbody.appendChild(row);
}
function delRow2() {
var current = window.event.srcElement;
//here we will delete the line
while ((current = current.parentElement) && current.tagName != "TR");
current.parentElement.removeChild(current);
}
And This is my html Pls help me
<table id="tblPets2" style="width: 80%; overflow-x: hidden;" class="custom-tablePopup">
<tr>
<th>No's</th>
<th>Length(m)</th>
<th>Width(m)</th>
<th>Depth(m)</th>
<th>Azimuth(Degrees)</th>
<th>Elevation above GL(m)</th>
<th>Position(Leg/Face)</th>
</tr>
<tr>
<td style="width: 80%;">
<input type="text" name="quantity2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="Length2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="Width2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="Depth2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="azimuth2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="elevation2" style="width: 140px;" size="20" maxlength="30" /></td>
<td>
<input type="text" name="position2" style="width: 140px;" size="20" maxlength="30" /></td>
<td class="auto-style1">
<img src="images/Close_Box_Red.png" onclick="delRow2()" style="width: 22px; cursor: pointer;" /></td>
</tr>
</table>
<table class="TemplateTable">
<tr>
<td style="float: right; padding-right: 90px;">
<div>
<img id="Img2" src="images/images%20.png" width="20" runat="server" />
</div>
<div>
<a title="Add more template" style="cursor: pointer;" onclick="ADDRow('tblPets2')">Add
Template</a>
</div>
</td>
</tr>
</table>