The below image would explain what the following code does.This is done at the time I started learning js can be still made better.
<html>
<head>
<script>
function startAdd()
{
var tbl = document.getElementById("sample1");
row =tbl.insertRow();
var td=document.createElement("TD");
var elem= document.createElement("<input name='text1' value='ee' type='text' size='5' />");
td.appendChild(elem);
var elem0= document.getElementById('sampleDd');
td.innerHTML=td.innerHTML+document.getElementById('sampleDd').innerHTML;
var elem1= document.createElement("<input type='text' value='sample' size='5' />");
td.appendChild(elem1);
var elem2= document.createElement("<input type='text' value='sample' size='5' />");
td.appendChild(elem2);
var elem3= document.createElement("<input type='button' value='delete' size='5' onClick=removeRow('sample1') />");
td.appendChild(elem3);
row.appendChild(td);
}
function removeRow(tableName)
{
row=event.srcElement.parentNode.parentNode;
document.all[tableName].deleteRow(row.rowIndex);
}
function traceChange(obj)
{
row=event.srcElement.parentNode.parentNode.parentNode;
document.getElementsByName("text1")[row.rowIndex-2].value="sample";
}
</script>
</head>
<body>
<form name="jsform">
<table id="sample1">
<tr>
<td><input type=button value="add" onClick="startAdd()"></td>
</tr>
<tr style="display:none;">
<td id="sampleDd">
<nobr>
<select name="sel" onChange="traceChange(this)" value="one"><option>1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option></select>
</nobr>
</td>
</tr>
</table>
</form>
</body>
</html>
Cheers :-)
No comments:
Post a Comment