Using DOM to change properties of input w/in a cell 1

[southbeach]

OK - I'm working on a script with the objective to change the properties of an input tag dynamically. The catch is that I do not know the ID for the input tag.

You see, I am also adding these tags dynamically using insertRow() and insertCell(). Further, the rows could be removed using deleteRow(). If that is not all, I am using a fixed name like pieces[] as I am intending to process the form with a PHP script and expect the data to be processed in a form of an array.

One thing I am doing is that each rows will have a fixed number of columns. This allows me to use a fixed number for tag placement. I am using conditional code to set or unset the innerHTML of a cell based on values chosen on associated fields.

So, if value in field (A) requires that input tag in column (7) be entered, I need to change the properties of input tag that appears within the column (7) node.

Right now I am inclined to simply changing the entire innerHTML content and have user do his her thing. I am hoping I could just change the className or something.

What say you?

Thank you all in advance for your assistance!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[feherke]

Hi

Something like this ?

[b]var[/b] thetable=document.getElementById([i]'[green]tableid[/green]'[/i])

[b]for[/b] ([b]var[/b] i=0,l=thetable.rows.length;i<l;i++)
  thetable.rows[i].cells[[green][i]columntochange[/i][/green]-1].getElementsByTagName([i]'input'[/i])[0].className=[i]'[green]whatever[/green]'[/i]

Feherke.

http://rootshell.be/~feherke/

 

[southbeach]

Feherke,

Very Nice !!!

Following your suggestion I was able to do

function wlf_total_wgt(it,thetable,targetcol) {
	var fvalue = it.value*1;
	var frow = it.parentNode.parentNode.rowIndex;
	var rows = document.getElementById(thetable).getElementsByTagName('tr')[frow];
	if (fvalue) {
		alert('fvalue is true ...');
		rows.cells[targetcol].getElementsByTagName('input')[0].value='';
		rows.cells[targetcol].getElementsByTagName('input')[0].className='noinput';
	} else {
		alert('fvalue is false ...');
		it.value='';
		rows.cells[targetcol].getElementsByTagName('input')[0].className='normal';
		rows.cells[targetcol].getElementsByTagName('input')[0].focus();
	}
}

My problem is that I cannot use CSS to make a field read-only ... I am going to have to trick it using a layer to block the field or DOM to re-write the HTML with the field new properties.



--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[feherke]

Hi

My problem is that I cannot use CSS to make a field read-only ...

Of course you can not. The read-only is related to functionality and CSS is to change appearance.

function wlf_total_wgt(it,thetable,targetcol) {
    var fvalue = it.value*1;
    var frow = it.parentNode.parentNode.rowIndex;
    var rows = document.getElementById(thetable).getElementsByTagName('tr')[frow];
    [red]var inp=rows.cells[targetcol].getElementsByTagName('input')[0];[/red]
    if (fvalue) {
        alert('fvalue is true ...');
        [red]inp[/red].value='';
        [red]inp[/red].className='noinput';
        [red]inp.readOnly=true[/red]
    } else {
        alert('fvalue is false ...');
        it.value='';
        [red]inp[/red].className='normal';
        [red]inp.readOnly=false[/red]
        [red]inp[/red].focus();
    }
}

Feherke.

http://rootshell.be/~feherke/