The following code will add and remove table rows.
However it is only working in Iexplorer.
How to make it work in Netscape/ Mozilla also (Would be nice if it should work in Opera also)?
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
var inputCount = 0;
function addLine() {
var objSource = window.event.srcElement;
var currentTR, currentTD, currentSelect, temp;
//set row number
inputCount++;
//here we will delete the line
while ( (objSource = objSource.parentElement) && objSource.tagName !="TBODY");
//add the tr to the table
currentTR = objSource.insertRow();
currentTR.bgColor = "red";
currentTD = currentTR.insertCell();
currentTD.innerHTML = "<input type='text' size='10' name='items_"+inputCount+"
'>";
currentTD = currentTR.insertCell();
currentTD.innerHTML = "<input type='text' size='10' name='value_0'>";
currentTD = currentTR.insertCell();
currentTD.innerHTML = "<input type='Button' class='Button' onclick='removeLine()' value='Delete this line'>";
}
function removeLine() {
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.remo
veChild(cu
rrent);
}
</script>
</head>
<body>
<table bgcolor="#ffffff" border=0 cellspacing=1 cellpadding=3 id="myTable">
<tr bgcolor="red" valign=top>
<th>
Pieces<br />
</th>
<th>
Amount<br />
</th>
<th>
<input type="button" class="Button" onclick="addLine()" value="add a row"><br />
</th>
</tr>
<tr bgcolor="red" valign=top>
<td>
<input type="text" size="10" name="items_0" value="1"><br />
</td>
<td>
<input type="text" size="10" name="value_0">
</td>
<td>
<input type="Button" class="Button" onclick="removeLine()" value="Delete this line"><br />
</td>
</tr>
</table>
</body>
</html>
Start Free Trial
