asked on

How do I access a cells header?

Hi,

I have a header item that I need to change with javascript. How do I access it to assign a new value?

<td align="center" headers="COST" class="t2data"><b> 586.83</b></td>

b0lsc0tt

bcarlis,

Is this html? That isn't a valid attribute for that tag and I don't believe it is used in any html tag. DOM won't allow you to access it and it will probably cause issues as the browser processes the html. What are you trying to use it for because there may be a different attribute you can use?

Let me know if you have any questions or need more information.

b0lsc0tt

BILL Carlisle

ASKER

Hi,
That is the result of a SUM in Oracle Apex...
What about using a cascadehtmlItem('COST') ?

b0lsc0tt

I was wrong. That isn't a very common attribute. :)

I assume you want something for javascript. What other attributes are in that td tag? Are there other tags with headers="COST"? DOM will allow you to get it with element.headers but these details will help me tell you how to use it.

bol

Cem Türk

give an id to the td

then use document.getElementById("tdID").headers="BLABLA";

BILL Carlisle

ASKER

Thank you for your help!

At this time there are no other items in the TD but I can probably add it to the template I'm using..
Or loop through the elements until I find one with a headers='COST' ???

What would a loop look like to try each TD element in the TABLE?

Bill

b0lsc0tt

It is easiest if you can add a unique id attribute, like Cem_Turk mentioned. You can get that specific element just with the one line. Otherwise you will need to use something like ...

var tds = document.getElementsByTagName("td");
for (var td in tds) {
if (td.headers=="COST") {
// you found the element, do what you need
}
}

That loop will also find the one td with COST as the value for headers. There may be an issue if the other td tags don't have a headers attribute. Let me know if there is a problem. My recommendation is the id.

bol

BILL Carlisle

ASKER

OK, great.. once I find the cell, how do I reference the text area? 586.83

<td align="center" headers="COST" class="t2data"><b> 586.83</b></td>

Would it be td.value? or does a cell have a text value

b0lsc0tt

It doesn't have a value. You would usually use innerHTML or innerText to get the contents of a tag. Neither will access just the number though. I usually use innerHTML and the results of that would be ...

<b> 586.83</b>

Let me know if you have any questions.

bol

Cem Türk

first give an id to the td

<td align="center" id="datatd" headers="COST" class="t2data"><b> 586.83</b></td>

now you can use document.getElementById("datatd").headers="blabla" to change the header.
document.getElementById("datatd").innerHTML to get "<b> 586.83</b>" (FF and IE)
or
document.getElementById("datatd").innerText to get text only (IE only)

BILL Carlisle

ASKER

Hi,
      var tds = document.getElementsByTagName('td');
      for (var xtd in tds) {
       //alert('Here:'+xtd.headers);
       if (xtd.headers=="COST") {
       // you found the element, do what you need
       alert(xtd.innerHTML);
       }
      }

      After inserting the above code into my javascript is popups up
      my alert, "Here:undefined"
      and never hits the alert(xtd.innerHTML);

b0lsc0tt

The problem is using For in. Let's change it.

var tds = document.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
if (tds[i].headers=="COST") {
alert(tds[i].innerHTML);
}
}

That should work better.

bol

Pravin Asar

<html>
<body>
To get the attribute , use getAttribute method.

Bring the mouseover the cell to see the result.
<table>
<tr>
<td align="center" headers="COST" class="t2data" onmouseover="alert (this.getAttribute('headers'));"><b> 586.83</b></td>
</tr>
</table>
</body>
</html>

BILL Carlisle

ASKER

That did it b0lsc0tt !!

Thank you much, One more thing... it grabs a "headers" of 'COST' for each row and then gives the sum row that I desire.

<LABEL class=hideMe508 for=f11_0001>COST</LABEL><INPUT id=f11_0001 maxLength=2000 size=4 value=200 name=f11>
<LABEL class=hideMe508 for=f11_0002>COST</LABEL><INPUT id=f11_0002 maxLength=2000 size=4 value=610 name=f11>
<LABEL class=hideMe508 for=f11_0003>COST</LABEL><INPUT id=f11_0003 maxLength=2000 size=4 value=440 name=f11>
<LABEL class=hideMe508 for=f11_0004>COST</LABEL><INPUT id=f11_0004 maxLength=2000 size=4 value=600 name=f11>
<LABEL class=hideMe508 for=f11_0005>COST</LABEL><INPUT id=f11_0005 maxLength=2000 size=4 value=320 name=f11>
<B>2,170.00</B>

var tds = document.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
if (tds[i].headers=="COST") {
??? if (tds[i].?????.type=='input'){
lsumtotal = lsumtotal + tds[i].?????.value;
}
tds[i].innerHTML=lsumtotal;
alert(tds[i].innerHTML);
}

BILL Carlisle

ASKER

Here is the cell syntax too...

<td align="center" headers="COST" class="t2data">
<label for="f11_0001" class="hideMe508">COST</label>
<input type="text" name="f11" size="4" maxlength="2000" value="200.00" id="f11_0001" />
</td>

<td align="center" headers="COST" class="t2data"><b> 2,400.00</b></td>

BILL Carlisle

ASKER

b0lsc0tt,

Made a bit of progress...

var ltotal =0;
var tds = document.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
if (tds[i].headers=="COST") {
var inputObjs= tds[i].getElementsByTagName('input');
if (inputObjs.length >0) { //THIS WORKS

ltotal = ltotal + inputObjs.value; //THIS DOES NOT WORK

}else{
alert(tds[i].innerHTML); //THIS WORKS - gives me the cell that holds the total
}

}
}

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BILL Carlisle

ASKER

This did it!

And you also did see exactly what I needed...

var ltotal =0;
var tds = document.getElementsByTagName('td');
for (var i=0; i<tds.length; i++) {
if (tds[i].headers=="COST") {
var inputObjs= tds[i].getElementsByTagName('input');
if(inputObjs.length>0) {
for (var j=0;j<inputObjs.length;j++) {
ltotal+= parseFloat(inputObjs[j].value);
//alert(inputObjs[j].value);
//alert(ltotal);
}
}else{
tds[i].innerHTML=ltotal;
}
}
}

Thank you again for all your help!!
I can go home now :>) Bill

b0lsc0tt

Great! Your welcome! I'm glad that I could help. Thank you for the grade, the points and the fun question.

bol