...
PDA

How to provide the same functionality to an element in innerHTML as it is present in

usha rao
04-28-2009, 09:25 AM
Hi All,
I have an HTML page having a table and many columns.In that page i have to add new rows and cells dynamically.Adding new rows is working fine using inner HTML.
But for particular textboxes i have two buttons namely "edit" and "save".the edit button will make the textbox editable and "save" button will make the textboxes in that row uneditable.
Now my question is that as i am adding new rows using innerHTML how to add this functionality (making the textbox editable and uneditable) to the buttons that are dynamically created.

Code lokks like this:

<html>
<head>
<title>E 1.3</title>
<script type="text/javascript">
function insRow(idval)
{
var x=document.getElementById(idval).insertRow(1);
var a=x.insertCell(0);
var b=x.insertCell(1);
var c=x.insertCell(2);
var d=x.insertCell(3);
a.innerHTML="<input type='text' >";
b.innerHTML="<input type='text' >";
c.innerHTML="<input type='submit' value='edit' onClick='disable1(false)'; >";
d.innerHTML="<input type='submit' value='save' onClick='disable(true)'; >";
}
function delRow(idval)
{
var x=document.getElementById(idval).deleteRow(1);
var a=x.deleteCell(0);
var b=x.deleteCell(1);
var c=x.deleteCell(2);
var d=x.deleteCell(3);
var e=x.deleteCell(4);
}
function disable(onoff)
{
txtbox1.disabled=onoff;
txtbox2.disabled=onoff;
}
function disable1(onoff)
{
txtbox3.disabled=onoff;
txtbox4.disabled=onoff;
}
</script>
</head>
<body ALINK="#FF0000" LINK="#0000FF" VLINK="#FF33FF" bgcolor="#FFFFCC">
<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td>
<table id="myTable1" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td >Australia</td>
<td><input type="text" name='txtbox1' disabled=true value="376080039931009" /></td>
<td><input type="text" name='txtbox2' disabled=true value="rptau4793" /></td>
<td><a HREF="" target="new">Summary of Accounts</a></td>
<td><a HREF="" target="new">Estatement</a></td>
<td><input type="submit" value="edit" onClick=disable(false);></td>
<td><input type="submit" value="save" onClick=disable(true);></td>
</tr>
</table>
<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td><input type="button" onclick="insRow('myTable1')" value="Insert row"></td>
<td><input type="button" onclick="delRow('myTable1')" value="delete row"></td>
</tr>
</table>
</td>
<tr>
<td>
<table id="myTable2" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td >Australia</td>
<td><input type="text" name='txtbox3' disabled=true value="376080039931009" /></td>
<td><input type="text" name='txtbox4' disabled=true value="rptau4793" /></td>
<td><a HREF="" target="new">Summary of Accounts</a></td>
<td><a HREF="" target="new">Estatement</a></td>
<td><input type="submit" value="edit" onClick=disable1(false);></td>
<td><input type="submit" value="save" onClick=disable1(true);></td>
</tr>
</table>
<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td><input type="button" onclick="insRow('myTable2')" value="Insert row"></td>
<td><input type="button" onclick="delRow('myTable2')" value="delete row"></td>
</tr>
</table>
</td>
</table>
</body>
</html>




The part that is having problem ios :

function insRow(idval)
{
var x=document.getElementById(idval).insertRow(1);
var a=x.insertCell(0);
var b=x.insertCell(1);
var c=x.insertCell(2);
var d=x.insertCell(3);
a.innerHTML="<input type='text' >";
b.innerHTML="<input type='text' >";
c.innerHTML="<input type='submit' value='edit' onClick='disable1(false)'; >";
d.innerHTML="<input type='submit' value='save' onClick='disable(true)'; >";
}


If it is not possible with innerHTML to dynamically add new rows and assign functionality is it possible with any new javascript functionality.Please advice.

Thanks in advance
:(
vwphillips
04-28-2009, 10:55 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function disable(ud){
var evt=window.event||arguments.callee.caller.arguments[0];
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode; // defeat Safari bug
var tr=obj;
while (tr.parentNode&&tr.nodeName!='TR') tr=tr.parentNode;
ips=tr.getElementsByTagName('INPUT');
for (var z0=0;z0<2;z0++){
if (!ud) ips[z0].removeAttribute('disabled');
else ips[z0].setAttribute('disabled','disabled');
}
}

function insRow(id){
var table=document.getElementById(id);
clone=table.getElementsByTagName('TR')[0].cloneNode(true);
table.getElementsByTagName('TBODY')[0].appendChild(clone);
ips=clone.getElementsByTagName('INPUT');
for (var z0=0;z0<2;z0++){
ips[z0].setAttribute('disabled','disabled');
}
}

function delRow(id){
var table=document.getElementById(id);
var rows=table.rows;
if (table.rows.length>1){
rows[0].parentNode.removeChild(rows[rows.length-1]);
}
}
/*]]>*/
</script></head>

<body>
suggest you use brackets notation for input names to facilitate submission of new rows inputs
<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td>

<table id="myTable1" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tbody>
<tr>
<td >Australia</td>
<td><input type="text" name='txtbox1[]' disabled=true value="376080039931009" /></td>
<td><input type="text" name='txtbox2[]' disabled=true value="rptau4793" /></td>
<td><a HREF="" target="new">Summary of Accounts</a></td>
<td><a HREF="" target="new">Estatement</a></td>
<td><input type="submit" value="edit" onClick=disable(false);></td>
<td><input type="submit" value="save" onClick=disable(true);></td>
</tr>
</tbody>
</table>

<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td><input type="button" onclick="insRow('myTable1')" value="Insert row"></td>
<td><input type="button" onclick="delRow('myTable1')" value="delete row"></td>
</tr>
</table>

</td>
<tr>
<td>

<table id="myTable2" border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tbody>
<tr>
<td >Australia</td>
<td><input type="text" name='txtbox3[]' disabled=true value="376080039931009" /></td>
<td><input type="text" name='txtbox4[]' disabled=true value="rptau4793" /></td>
<td><a HREF="" target="new">Summary of Accounts</a></td>
<td><a HREF="" target="new">Estatement</a></td>
<td><input type="submit" value="edit" onClick=disable(false);></td>
<td><input type="submit" value="save" onClick=disable(true);></td>
</tr>
</tbody>
</table>

<table border="0.5" bgcolor="#CCFFCC" cellpadding="2" cellspacing="5">
<tr>
<td><input type="button" onclick="insRow('myTable2')" value="Insert row"></td>
<td><input type="button" onclick="delRow('myTable2')" value="delete row"></td>
</tr>
</table>
</td>
</table>
</body>

</html>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum