...

View Full Version : Anyway to link elements and change them all dynamically?



acargol
05-06-2006, 02:12 AM
Thanks for checking this out, here's my problem.

I am given a list of data, and from that I need to create a table where each row is of the form:

field comment editButton deleteButton

So when someone hits the editButton I want to be able to change that to a different button (a confirm button which confirms the change) but I would also like to change it so that the <input type="text"> becomes editable and looks like a text field (i.e. the style and readonly tags are removed.). Then after a user hits confirm, it will go back to looking like it did.

Anyways I think I can figure out how to write the functions to do what I want, but what I can't seem to find anywhere is a way to get the element Id's that I need, so that when the edit button is clicked, I can also get the id of the text field("text1") in that row and make the appropriate changes or when I click delete, I can get the id of the row "Tr1" and remove the row.

If anyone has any ideas it would be very much appreciated, or if you know of a site where I can go to figure this out, that would also be nice.

Thanks in advance,



<table cellpadding="10" id="table1">
<tbody>
<tr align="left"><th><u>Field</u></th><th><u>Comment</u></th></tr>
<tr id="Tr1">
<td>example!</td>
<td><input id="text1" type="text" style="border-style:none;background-color:transparent" readonly="readonly" value="...with comment!" /></td>
<td><input id="edit1" type="button" value="Edit" onclick="editRow();" /></td>
<td><input id"del1" type="button" value="Delete" onclick="delRow();" /></td>
</tr>

Kor
05-06-2006, 07:45 AM
So when someone hits the editButton I want to be able to change that to a different button (a confirm button which confirms the change)

This is the part I don't quite understand. The rest is simple. What do you mean by confirm button? What this new "confirm" button must do?

vwphillips
05-06-2006, 08:52 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>
<style type="text/css">
/*<![CDATA[*/
.readonly {
border-style:none;background-color:transparent
}

.write {

}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

var TBObj;
var zxcEvt=0;


function editRow(obj){
var tr=obj;
while (tr.tagName!='TR'){ tr=tr.parentNode; }
var tb=tr.getElementsByTagName('INPUT')[0];
obj.set=true;
tb.set=true;
if (obj.value=='Edit'){
tb.className='write';
tb.save=tb.value;
tb.active=obj;
TBObj=tb;
}
else {
tb.className='readonly';
obj.value='Edit';
TBObj=false;
}
}

function NoType(obj){
if (!obj.active){ obj.blur(); }
else { obj.active.value='Confirm'; }
}

function Complete(zxce){
if (zxcEventObj(zxce).set||!TBObj){ return; }
TBObj.className='readonly';
TBObj.value=TBObj.save;
TBObj.active.value='Edit';
TBObj=null;
}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}


function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


function zxcAddEvent(zxc,zxcfun,zxcevt){
if (zxc.addEvent){ return; }
zxc.addEvent=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'addEvent');
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

zxcAddEvt(document,'Complete','mouseup')

/*]]>*/
</script></head>

<body>
<table cellpadding="10" id="table1">
<tbody>
<tr align="left"><th><u>Field</u></th><th><u>Comment</u></th></tr>
<tr id="Tr1">
<td>example!</td>
<td><input id="text1" type="text" class="readonly" onfocus="NoType(this);" value="...with comment!" /></td>
<td><input id="edit1" type="button" value="Edit" onclick="editRow(this);" /></td>
<td><input id"del1" type="button" value="Delete" /></td>
</tr>
</tbody>
</table>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum