Isotropes
asked on
Need to insert a dynamic Row inbetween a two dynamic rows that have been already created !?
Hi i want to insert a dynamic row inbetween two dynamic rows which have already created by using the addrow button. There is a "+" button in the dynamic row, if click that a new different row should be created inbetween two dynamic rows ? Got it ? please let me know if u have any queries !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic Table</title>
<script language="javascript">
function addSite()
{
var myTable = document.getElementById("myTable");
var newTR = document.createElement("tr");
var newName1 = document.createElement("td");
var newName2 = document.createElement("td");
var newName3 = document.createElement("td");
var newName4 = document.createElement("td");
var newName5 = document.createElement("td");
var newName6 = document.createElement("td");
var newName7 = document.createElement("td");
var newName8 = document.createElement("td");
var newName9 = document.createElement("td");
var newName10 = document.createElement("td");
var newName11 = document.createElement("td");
newName1.innerHTML="<input type='text' name='dynamicSite'>";
newName2.innerHTML="<a href='resumepage.html'>Site Details</a>";
newName3.innerHTML="<input type='text' name='dynamicLocation'>";
newName4.innerHTML="<input type='button' name='dynamicLocationPlus' value=' + ' onclick='addLocation(this.parentNode.parentNode.rowIndex)'>";
newName5.innerHTML="<input type='text' name='dynamicProduct'>";
newName6.innerHTML="<input type='button' name='dynamicProductLookup' value=' ^ '>";
newName7.innerHTML="<input type='button' name='dynamicProductPlus' value=' + '>";
newName8.innerHTML="<select name='dynamicFee'><option selected='selected'>Setup Fee</option><option>Training Fee</option><option>Misc Fee</option></select>";
newName9.innerHTML="<input type='button' name='dynamicFeePlus' value=' + '>";
newName10.innerHTML="<input type='button' name='dynamicFeeSetup' value=' FeeSetup '>";
newName11.innerHTML="<input type='button' value=' deleteRow ' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'>";
newTR.appendChild(newName1);
newTR.appendChild(newName2);
newTR.appendChild(newName3);
newTR.appendChild(newName4);
newTR.appendChild(newName5);
newTR.appendChild(newName6);
newTR.appendChild(newName7);
newTR.appendChild(newName8);
newTR.appendChild(newName9);
newTR.appendChild(newName10);
newTR.appendChild(newName11);
myTable.appendChild(newTR);
}
function addLocation(i){
alert("adddLocation" +i);
var myTable = document.getElementById("myTable");
var newTR = document.createElement("tr");
var newName1 = document.createElement("td");
var newName2 = document.createElement("td");
var newName3 = document.createElement("td");
var newName4 = document.createElement("td");
var newName5 = document.createElement("td");
var newName6 = document.createElement("td");
var newName7 = document.createElement("td");
var newName8 = document.createElement("td");
newName1.innerHTML="<input type='text' name='dynamicLocationLocation'>";
newName2.innerHTML="<input type='text' name='dynamicLocationProduct'>";
newName3.innerHTML="<input type='button' name=' ' value=' ^ '>";
newName4.innerHTML="<input type='button' name='dynamicLocationProductPlus' value=' + ' >";
newName5.innerHTML="<select name='dynamicLocationFee'><option selected='selected'>Setup Fee</option><option>Training Fee</option><option>Misc Fee</option></select>";
newName6.innerHTML="<input type='button' name='dynamicLocationFeePlus' value=' + '>";
newName7.innerHTML="<input type='button' name='dynamicLocationFeeSetup' value=' FeeSetup '>";
newName8.innerHTML="<input type='button' value=' deleteRow ' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'>";
newTR.appendChild(newName1);
newTR.appendChild(newName2);
newTR.appendChild(newName3);
newTR.appendChild(newName4);
newTR.appendChild(newName5);
newTR.appendChild(newName6);
newTR.appendChild(newName7);
newTR.appendChild(newName8);
myTable.appendChild(newTR);
}
function deleteRow(i){
alert(i);
document.getElementById('myTable').deleteRow(i);
}
function validate(){
alert("Submit");
}
</script>
</head>
<body>
<form name="form">
<table align="right">
<tr>
<td><input type="button" value=" addRow " onClick="addSite()"></td>
</tr>
</table>
<br><br>
<table>
<tr>
<td><b>Site</b></td>
<td><b>Location</b></td>
<td><b>Product</b></td>
<td><b>Fee</b></td>
<td><b>FeeSetup</b></td>
</tr>
</table>
<br>
<table>
<tbody id='myTable'>
<tr>
<td><input type="text" name=site></td>
<td><a href='resumepage.html'>Site Details</a></td>
<td><input type="text" name=location></td>
<td><input type="button" name="locationPlus" value=" + " onclick='addLocation(this.parentNode.parentNode.rowIndex)'></td>
<td><input type="text" name=product></td>
<td><input type="button" name="productLookup" value=" ^ "></td>
<td><input type="button" name="productPlus" value=" + "></td>
<td><select name="fee" id="fee">
<option selected="selected">Setup fee</option>
<option>Training Fee</option>
<option>Misc Fee</option>
</select>
</td>
<td><input type="button" name="feePlus" value=" + "></td>
<td><input type="button" value=" feeSetup "></td>
<td><input type="button" value=" deleteRow " onclick='deleteRow(this.parentNode.parentNode.rowIndex)'></td>
</tr>
</tbody>
</table>
<div id="my_div"></div>
<br>
<table align="center">
<tr>
<td>
<input type="submit" value=" Submit " onclick="validate()">
</td>
</tr>
</table>
</form>
</body>
</html>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER