bit more help with innerhtml plzzz

[sandeep89]

k, i have a site, and i cannot directly change the source code, or i wud not be posting this.

Basically, the site has one CSS class, say row1, which is used for a variety of different cells, and i want to be able to add a modification so that i can select a certain cell or group of cells, i dnt care bout the lengths of mods really. This hack would have to find a cell, and then be able to replace its html, so i could change say:

<p class="row1"><a href="http://site.com">text</a></p>
to
<p class="row2"><a href="http://site.com">text</a></p>

i know that this is possible, it should need the innerhtml function of javascripts and dhtml i believe, but its css and and html so i thought i'd post it here...

the condition is that it must only select and change the one cell, like:

<p class="row1"><a href="http://site.com">text</a></p>
<p class="row1"><a href="http://site.com">te2xt</a></p>
<p class="row1"><a href="http://site.com">te3xt</a></p>

all three bits of text have the same CSS class, but only 'text' must be changed, not 'te2xt' or 'te3xt'

shudn't be too hard for some, fingers crossed, and tnx in advance to ne1 who tries to help

[Kor]

you wanna change the inner text for certain elements with the same class?

[sandeep89]

if i got u rite, then yup

i want to change the CSS class certain elements with the same class, although they might be different classes, really just want something like:
document.getelementsbyTagName=something & innerhtml=='<p class="row1"><a href="http://site.com">text</a></p>'

and then be able to change it to something else...im nt sure if thats the kinda code u need or not, but it should work if you know how to use it...

[Kor]

i want to change the CSS class certain elements with the same class, although they might be different classes


Are there all with the same class to be changed or not... make up your mind...

I was asking you which elements are to be changed. You must refere them somehow. Which is their common something? Or is there a list? Ie: elements with id=bla1 bla4 bla23... Or their index in a parent childNodes? Ie: the cell number/index 2, number/index 43, number/index 100... ? Or all have the same class?

Which are the elements to be changed?

[Harry Armadillo]

Is this for a Greasemonkey script? Sure sounds like it.

Give more examples, and use the site's actual code. Show exactly what parts need changed and what needs to remain the same. Include a link to site for better results.

[sandeep89]

sorry, ill try this again...

first, the stylesheet:


<style>
<!--
.row4 { background-color: #E4EAF2 }
-->
</style>


i have only left .row4, as its the only class required in this example, ask and i will give the whole CSS, just that its fairly large...

next, the bits i want to edit:


<tr><td class="row4" align="middle">
<a style="text-decoration: underline; color: #000" href="http://www.place.com/index.php?act=Login&CODE=04&f=4">
<img src="http://place.com/bf_new.gif" border="0" style="vertical-align: middle; border: 0px none"></a></td>
<td class="row4">
<a href="http://www.place.com/index.php?showpage=4">
<span style="text-decoration: underline"><b>
<span style="color: #000000">Location1</span></b></span></a><br>
<span class="desc">Description</span></td>
</tr>

<tr style="font-family: Verdana, Tahoma, Arial, sans-serif; font-size: 11px; color: #000">
<td class="row4" align="middle">
<img alt="" src="http://place.com/bf_nonew.gif" border="0" style="vertical-align: middle; border: 0px none"></td>
<td class="row4">
<a href="http://www.place.com/index.php?showpage=5">
<span style="text-decoration: underline"><b>
<span style="color: #000000">Location2</span></b></span></a><br>
<span class="desc">Description2</span></td></tr>


the above is a large chunk of code, for two rows on the web page that i have. I have put a line between the two rows to show where they start/end, just to help if it does.

First, the first column, first row (<td>) in dark orange. The html for it is shown. It has the class "row4".
The second column in the first row is shown in red. The class for this is also "row4".

There is a similar style for the next row, just that it has different content for the second column on that second row.

Now, as you can see, the first and second colums both have the same class, but i want them to have different classes, so that i can make them look different.

If it helps, i have found:
document.getElementById("copytext4").className = "blueArea";
im still not used to using innerhtml, learning it very slowly as i find new thing, but if someone can use this to help change the classes then thanks.

Also, to find and replace html, i found:

document.body.innerHTML = document.body.innerHTML.replace(/\b(test)\b/g, 'sample')

im not certain about the /\b and \b/g bits, and when i try to replace the code with what i want it simply does not work, but if there is a small tweak you can make for it then thanx as well...

i hope from this you can see what needs to be changed. The similar element with them all is the CSS class.
and this is not for a greasemonkeys script, i haven't heard of the site before, mite have a look now...

thanx if you can help...i hope its not going to be too hard

[Harry Armadillo]

Well, since this is the DOM scripting forum...I suggest using DOM methods, and not innerHTML.

Find the table you want to change. If it has an id, use document.getElementById; otherwise use docuent.getElementsByTagName("table") to get an array with all the tables on the pages and loop through them until you find the table you want.

Then, get all the table rows using tableObj.getElementsByTagName("tr") and loop through them. Then get the table cells, etc.

At any point along the way, you'll be able to test the objects to see if they are the ones you want to work with. You can check their className, check for specific childNodes (example: an anchor with specific href), whatever.

You'll find that doing it this way allows much greater flexibility. Plus, innerHTML has side-effects -- like the possible loss of event handlers.

[Willy Duitt]

I'm thinking that you are trying to load someonelse's page into either a frameset or iframe and then manipulate their content to provide links of your choice...

Are both of these pages on the same domain??
And why can you not edit the page in question??

.....Willy

[sandeep89]

don't worry bout that, im not loading someone else's page in a frame and then trying to edit the pages.

The website is a forum which im trying to edit. Its a free forum, and they have said that i can add modifications to the forum, apart from those that remove the copyrights or ads that they have placed on the site, and that not what i want to do. All i want as said before is to change the CSS of some onbject, reali because they have backgrounds and font oclours that don't work in the places that they have been allocated, its a really bad thing on their server's side, and i can add to the CSS, they let me do that, and i can add coding to the header, body, footer etc, but i cannot directly edit the pages, as i don't have that part of the code, its for another version of the forum which would involve trashing all my work which took weeks to do and find and put together and that...

i hope this clears it up...

and for the DOM methods, how would i locate the exact object, i've seen the following, but im not sure if thats the exact method:
document.getElementsByTagName("table") & document.getElementsByTagName("tr")[20] & document.getElementsByTagName("td")[5]

im not sure if thats how its done, do do i just forget bout the &s and have
document.getElementsByTagName("table")
document.getElementsByTagName("tr")[20]
document.getElementsByTagName("td")[5]

or is that the number bit saying which tr and which td won't work. And then, how can i re-write the cell plz? Ill have another look again, maybe if i keep searching i might find out, but if you guys can let me know then it would be a lot more helpful for me...
thanx

[Willy Duitt]

My point was that if you are trying to manipulate an offsite page you will run into cross-site scripting privledges problems... And it still sounds as if the forum is hosted offsite... Got link??

[Willy Duitt]

BTW: document.getElementsByTagName("table")[0] would be the first table... document.getElementsByTagName("table") is nothing but a pointer to the collection...

[Harry Armadillo]

Again, a link to the page or pages would be nice. We could show you with working code instead of wasting time inventing examples that may not apply or simply are not the best way of proceding.

Once you find your table (tableObj=document.getElementsByTagName('table')[1] or tableObj=document.getElementsById("thisTable") or whatever), you access its rows with tableObj.getElementsByTagName("tr")[indexNumber] . document.getElementsByTagName("tr") would be the table rows in the entire document.

For accessing the contents of the table cell, you'll use .childNodes[indexNumber] to get its children, .nodeName or .nodeType to see what kind of child node it is, then you can change the .src of images or the .href of anchors or the .nodeValue of text-nodes, etc. etc.

[sandeep89]

yh, link is http://s11.invisionfree.com/nowerhill/index.php

im nt sure what you mean by hosted off-site, but i don't have the server if thats what you mean, the server contains probably hundreds of other forums, its an invisionfree server...

and thanx for lettin mi know that 0 is the first table, thats probably one of the things i was messing up...

This is the homepage link i have given, its the page i want to edit...
If you look down to the section with the boards, There is 'Announcements' with a description, and then the cell to its left with an image in it. These two cells both have the same style, which i what i wanted to change, so that thye could have different ones...

Thanx for your help till now, ill keep trying as well...doubt ill get there any time before you guys, but at least ill be trying something instead of waiting ryt...

if theres ne more you need to know, jus ask...im off to try the stuff with tableobj and nodes...thanx

[Harry Armadillo]

You'll probably want to start with somthing like:

tableCollection=document.getElementById('mainboard').getElementsByTagName('table');

tableCollection[0] through tableCollection[4] will correspond to the five groups of forums, so thenfor(var i=0;i<5;++i){
cellCollection=tableCollection[i].getElementsByTagName('td');
for(var j=0;j<cellCollection.length;++j){
cellObj=cellCollection[j];
if(cellObj.className=='row4'){
// put something here to decide which of the row4 class cells to change
// for exampe cellObj.getElementsByTagName('img').length==1 would imply the cell was in that first column of icons
}
}
}

[sandeep89]

thats great, thanx...just one last thing, what do i use to change the class, so far, i think that all of that finds the cells in question, but it doesn't actually replace the class, which is what i need...if you can do this then i won't ask quesions for a long long long tyme...cheerz

[Harry Armadillo]

Once you've found the cells you like, you can set their className to a new style.

cellObj.className="newStyleForTheseCells";

or you could do something silly, like

cellObj.style.backgroundColor="#CCCC"+(200+55*j/cellCollection.length).toString(16);

which would give you a gradient effect. :)

[sandeep89]

erm, the gradient looks more confusing then i hope, and i can use the style to have a background image with a gradient, so thats kl...

<script>
tableCollection=document.getElementById('mainboard').getElementsByTagName('table');
for(var i=0;i<5;++i){
cellCollection=tableCollection[i].getElementsByTagName('td');
for(var j=0;j<cellCollection.length;++j){
cellObj=cellCollection[j];
if(cellObj.className=='row4'){
cellObj.getElementsByTagName('img').length==1
cellObj.className="newclass1";
}
}
}
</script>

so, all put together, does this one make sense, im going to try it out now...

nope, tried it, still don't work, ne idea what im doing wrong?

[Harry Armadillo]

The example cellObj.getElementsByTagName('img').length==1 was meant for use as an if-condition (note the ==).

Likeif(cellObj.getElementsByTagName('img').length==1)
cellObj.className="newClassForTheImageColumn";orif (cellObj.getElementsByTagName('img').length==1 && cellObj.getElementsByTagName('a').length==1)
cellObj.className="newClassForTheIconImageOnlyIfThereAreNewPosts";orif (cellObj.getElementsByTagName('img').length==1 && cellObj.getElementsByTagName('img')[0].src.indexOf('bc_nonew')!=-1)
cellObj.className="newClassForTheIconImageOnlyIfThereAreNoNewPostsAndTheIconIsAnArrow";

:)

[sandeep89]

omg, thanks sooooo much, if this works, ill let u know, fingers crossed... :thumbsup: