We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Change some cells in a table, without having an "id".

PCBOP
PCBOP asked
on
Medium Priority
372 Views
Last Modified: 2013-11-05
I have a standard table generated from php. There 2 columns, first has text, and second has a number or predefined text (eg 1 or "not present"). I want to change the values of the second column with a script (eg in Greasemonkey), but I am not able to find out what value belongs to which text (the cells that are on the same row) because they don't have an 'id' tag to sort them with. I guess the only option is 'getElementsByTagName', but don't know how to recognize individual text with that and append the cell that follows. Any ideas or templates?
Comment
Watch Question

CERTIFIED EXPERT

Commented:
It should help you, tested on ie6,ff3
<html>
<head>
<script>
function onloadfun(){
 
var tabletags = document.getElementsByTagName('table');
//alert(tabletags[0]);
 
//  var tabletag = document.getElementById("tableid");
 
tabletag = tabletags[0];
  rows = tabletag.rows;
  for(i=1;i<rows.length;i++){
    cells = rows[i].cells;
    if (cells[0].innerHTML == 'text1'){
      cells[1].innerHTML = 123;
    }
  }
}
</script>
</head>
<body onLoad="onloadfun()">
<table id="tableid" border=0 cellpadding="0" cellspacing="0" >
  <tr id="eHead"><th>Date:</th><th>Event</th></tr>
  <tr><td >text1</td><td >0</td></tr>
  <tr><td >text2</td><td >1</td></tr>
</table>
</body>
</html>

Open in new window

CERTIFIED EXPERT

Commented:

Author

Commented:
I understand the flow of your script, however it doesn't work (doens't seem to write the '123'). The links you have given are somewhat helpfull, but all use the ElementId, which I can't use.

Author

Commented:
(and of course, I changed 'text1' to my own text.)

Author

Commented:
I uncommented the Alert, it doesn't come up...
CERTIFIED EXPERT

Commented:
?? code snippet from comment #23650419 is works fine on IE6,FF3 even safari, opera. So what's your browsers and version?
could you please copy code, place it in notepad and save it to .html file, open it?
you could take reference how to add tr,td tag from http://www.pxl8.com/createElement.html
what you need to do is

place arrayIndex * in tabletags[*]; that is!

var tabletags = document.getElementsByTagName('table');
tabletag = tabletags[0];

Again, what's your browser and version!?!?!

Author

Commented:
I found problem: the main table is within another table that has a header, and there are 2 other empty tables on the page. The script only focusses on the first table it encounters. How do I specify the right one?

Author

Commented:
(Your code works fine on its one, but not within the page I want to enhance)
CERTIFIED EXPERT

Commented:
okey, try place
<script language="javascript">
onloadfun();
</script>
at the bottom just before </body>

and omit onLoad="onloadfun()" from body tag

OR add a tag to somewhere in the body tag
<a href="#" onclick="onloadfun();"> update table tag</a>

to see how is going on?

try code snippet, tested on ie6,ff3,safari,opera......

<html>
<head>
<script>
function onloadfun(){
 
var tabletags = document.getElementsByTagName('table');
//alert(tabletags[0]);
 
//  var tabletag = document.getElementById("tableid");
 
tabletag = tabletags[0];
  rows = tabletag.rows;
  for(i=1;i<rows.length;i++){
    cells = rows[i].cells;
    if (cells[0].innerHTML == 'text1'){
      cells[1].innerHTML = 123;
    }
  }
}
</script>
</head>
<body >
<a href="#" onclick="onloadfun();"> update table tag</a>
 
<table id="tableid" border=0 cellpadding="0" cellspacing="0" >
  <tr id="eHead"><th>Date:</th><th>Event</th></tr>
  <tr><td >text1</td><td >0</td></tr>
  <tr><td >text2</td><td >1</td></tr>
</table>
</body>
</html>

Open in new window

Author

Commented:
I think you overlooked my last 2 comments. This does not affect the table in table issue.
CERTIFIED EXPERT
Commented:
but not works within the page I want to enhance? The script only focusses on the first table it encounters. How do I specify the right one?
first you must know how many table tag in your page and find the index of that table
set tabletag = tabletags[i]; to your javascript.
it is the only way to you can do without id tag in table
if you have any idea about  specify the right one without id attribute, but not counting the number of table tag. please let me know .

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
CERTIFIED EXPERT

Commented:
if specify the right one without id attribute? yes you can add attribute name. Read the right value of attribute name,
gain the tabletag by

for (i = 0; i < tabletags.length; i++){
  if (tabletags[i].attributes['name'].value == 'tablename3')
  tabletag = tabletags[i];
}

<table name="tablename3" >

that's
<html>
<head>
<script>
function onloadfun(){
 var i;
var tabletags = document.getElementsByTagName('table');
 
for (i = 0; i < tabletags.length; i++){
//  alert(tabletags[i].attributes['name'].value);
  if (tabletags[i].attributes['name'].value == 'tablename3')
  tabletag = tabletags[i];
}
 
 
  rows = tabletag.rows;
  for(i=1;i<rows.length;i++){
    cells = rows[i].cells;
    if (cells[0].innerHTML == 'text1'){
      cells[1].innerHTML = 123;
    }
  }
}
</script>
</head>
<body >
<a href="#" onclick="onloadfun();"> update table tag</a>
 
<table name="tablename" id="tableid" border=0 cellpadding="0" cellspacing="0" >
  <tr id="eHead"><th>Date:</th><th>Event</th></tr>
  <tr><td >text1</td><td >0</td></tr>
  <tr><td >text2</td><td >1</td></tr>
  <tr><td colspan=2><table name="tablename3" id="tableid" border=0 cellpadding="0" cellspacing="0" >
  <tr id="eHead"><th>Date:</th><th>Event</th></tr>
  <tr><td >text1</td><td >0</td></tr>
  <tr><td >text2</td><td >1</td></tr>
</table></td></tr>
</table>
 
<table name="tablename2" id="tableid" border=0 cellpadding="0" cellspacing="0" >
  <tr id="eHead"><th>Date:</th><th>Event</th></tr>
  <tr><td >text1</td><td >0</td></tr>
  <tr><td >text2</td><td >1</td></tr>
</table>
 
</body>
</html>

Open in new window

CERTIFIED EXPERT

Commented:
note : if you want to specify the right one with not know number of table there... you must specify some attribute on that table tag .... otherwise no way
CERTIFIED EXPERT

Commented:
PCBOP,
I seem you accept comment #23655487, could you have a look comment #23655846.
you can find a table tag by specify the right one without id attribute but with attribute name.
it would be better solution for you..
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.