Hi,
I have written a script to add rows dynamically. I have pasted the code below. You can copy and paste it to view it.
Brief:
There is a list box at the top which contains "First, Second etc..". When any option is selected another select box is displayed which contains "getSystem" array data. When any option is selected in this at the right a list of checkboxes gets displayed contains "getAccess" data.
When any checkbox is selected and "add" button is clicked it adds a new row in the table below with system name and checkboxes selected.
Help Required:
I wanted your help at the following two points:
- when I want to delete any entry how to delete the entry.
- avoid adding duplicate rows.
Thanks in advance
Srini
Code written:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dynamic Row</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
//Array for loading all systems
var getSystem = new Array();
getSystem[0] = "System1" ;
getSystem[1] = "System2" ;
getSystem[2] = "System3" ;
getSystem[3] = "System4" ;
//Array for loading all access
var getAccess = new Array();
getAccess[0] = "Access1" ;
getAccess[1] = "Access2" ;
getAccess[2] = "Access3" ;
getAccess[3] = "Access4" ;
var sel = "";
var val = "";
var chk = "";
var opn = "";
//Function to populate the system drop-down box
function shwSystem() {
if (document.getElementById("dispData").style.display == 'none') document.getElementById("dispData").style.display = 'block';
document.getElementById("SystemName").innerHTML = "";
document.getElementById("AccessType").innerHTML = "";
sel = document.createElement("select");
sel.id = "system";
opn = document.createElement("option");
opn.text = "";
sel.options.add(opn);
sel.onchange = function() {
//Function to create system checkboxes
document.getElementById("AccessType").innerHTML = "";
for(i = 0; i < getAccess.length; i++)
{
chk = document.createElement("input");
chk.type = "checkbox";
chk.id = getAccess[i];
chk.onclick = function() {
//Function to save the id of the checkbox clicked
val = this.id;
/*if(document.getElementById(val).checked == true)
{
alert("true");
//alert(sel.options.selectedIndex);
}*/
}
document.getElementById("AccessType").appendChild(chk);
document.getElementById("AccessType").appendChild(document.createTextNode(getAccess[i]));
var ps = document.createElement("<br />");
document.getElementById("AccessType").appendChild(ps);
}
}
for(i = 0; i < getSystem.length; i++)
{
opn = document.createElement("option");
opn.id = getSystem[i];
opn.text = getSystem[i];
opn.value = getSystem[i];
sel.options.add(opn);
}
document.getElementById("SystemName").appendChild(sel);
//alert(document.getElementById("SystemName").innerHTML);
}
//Function to add new rows based on the checkbox selection
function addRow(id) {
if (document.getElementById("SystemName").innerHTML != "" && document.getElementById("AccessType").innerHTML != "")
{
for(i = 0; i < getAccess.length; i++)
{
if(document.getElementById(getAccess[i]).checked)
{
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
//Adding first column
var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(sel.options[sel.selectedIndex].text));
//Adding second column
var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(document.getElementById(getAccess[i]).id));
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
}
//document.getElementById("dispData").style.display = 'none';
//document.getElementById("SystemName").innerHTML = "";
//document.getElementById("AccessType").innerHTML = "";
alert(document.getElementById("SysAcc").innerHTML);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<select name="select" onChange="shwSystem()">
<option></option>
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Fourth</option>
</select>
<div id="dispData" style="display: none;">
<table width="80%" border="0">
<tr>
<td width="40%"><div id="SystemName"></div></td>
<td width="40%"><div id="AccessType"></div></td>
</tr>
</table>
<br />
</div>
<br />
<input type="button" value="add" onClick="addRow('SysAcc')" />
<table width="100%" border="1" id="SysAcc">
<tbody>
<tr>
<th width="50%">System Name</th>
<th width="50%">Access Type</th>
</tr>
</tbody>
</table>
<br />
</form>
</body>
</html>