parentElement help...

[homerUK]

Hi,

I am trying to get the values of a table using createRange and Parent element functions...

I use:


var cursor = window.opener.iView.document.selection.createRange();
var table = cursor.parentElement();
while (table) {
if (table.tagName == "TD") {
alert("table found");
break;
}


and that code will decide if the cursor is in a valid table cell. The problem is, that I need to get the "TABLE" tag... I am a little stuck here... is there a way to get the parent element of a parent elemtn of a parent element???!

eg: the table structure is


<table>
<tr>
<td>
</td>
</tr>
</table>


and my code above will return the parent element "TD" ... but I need to get the "TABLE" element... is there a way of getting the first tag (table) ???

thanks for any help!! :p

[mordred]

parentElement() retrieves only the element that encompasses the textRange - it is not able to apply that generally to elements in the DOM. Luckily enough, there is property called parentNode for every node in the document, and implementing that into your code should achieve your goal:


var cursor = document.selection.createRange();
var table = cursor.parentElement();

// loop through nodes upwards to the document root
while (table.nodeName && table.nodeName.toLowerCase() != "table") {
// if there's a parentNode available, work upon that
if (table.parentNode) {
table = table.parentNode;
} else {
// no parentNode any longer available
break;
}
}

if (table.nodeName.toLowerCase() == "table") {
alert(table.id); // or any other attribute etc...

[homerUK]

hi, thanks for the reply!

I have used your code, and I think it works ok.... :p ..... but when I try to access the table elements, they come up undefined...

eg:

table.width returns "undefined" even though in the HTML code, table width is set to 100%!

any ideas?!

thanks a lot!!

[mordred]

Accessing the width attribute works for me. Maybe there's something different in your code than in mine? Perhaps you post the snippet of code the refuses to work so we can have a look at it.

[homerUK]

hi,

this is the exact code I am using


var cursor = document.selection.createRange();
var table = cursor.parentElement();

// loop through nodes upwards to the document root
while (table.nodeName && table.nodeName.toLowerCase() != "table") {
// if there's a parentNode available, work upon that
if (table.parentNode) {
table = table.parentNode;
} else {
// no parentNode any longer available
break;
}
}

//if (table.nodeName.toLowerCase() == "table") {
alert(table.border);
//}

and the HTML code looks like this:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>


but for some reason the code that you gave me was not returning the main table tag.... so I commented out the part which does the check....

:confused: thanks!!

[mordred]

Seems like I was not precise enough; I rather meant the code you used to trigger this snippet. Is it through a function, and if so, how and when do you call this function?

OTOH, what do you mean with "main" table tag? I see only one in your example. And further, there is no text beside an empty space in the <td> cells... is that intended? I have problems following your reasons for employing this code. :confused:

[homerUK]

eheh, np!

If you go to www.textarearich.com you will see the editor we are working on.... we have an iFrame which the new version (not yet on the website) will allow you to enter a table in WYSIWYG mode... once the table is inserted, I need to be able to update it... and this code is intended to actually get the values from the ParentNode.. the "Table" tag...

so... if the user places their cursor inside one of the table cells... then I need the JS to get the attributes of that table.. for example... to return the width, cellpadding, bgcolor etc etc... then these details can be changed....

Hope that clears it up!!

Thanks!!

[krycek]

...I hate to pour the cold water of disappointment on your idea, but from what I gather from your post and also visiting your website, you are trying to create something like this:

http://www.interactivetools.com/products/htmlarea/

...which unfortunately for you, is free!

It may help you out with your script, though, and good luck to you - it may well be that you are intending your textarea rich to be more functional :)

Just so you know!

::] krycek [::

[homerUK]

'ello!

Yeah, we've seen the free version, but like you said... we are currently developing a more advanced version (which has table support!!! :p ) among other things....

cheers for the pointers though!!

[brothercake]

That looks very interesting. I would caution against building raw-HTML input though - allowing users to input and upload html is very very dangerous.

[homerUK]

yeah, I agree... but the editor we are selling is only a starter for people.. if they want to stop certain code being entered... then that's up to them.... I was thinking of writing some sort of "add-on" which will detect any malicious script and stop it being submitted...... cheers for the advice..!

I still need to be able to get the TABLE properties though if anyone has any suggestions?!!

;)

[homerUK]

I got it working now!! I can get the table elements!! cheers!!

Does anyone know of a way to count the number of rows and columns in a table?

I was thinking some sort of loop....

for example...

while the cursor is inside a <table> tag....
count the number of TR (rows) and the number of TD (columns)..


any ideas??

so far I have used


var cursor = document.selection.createRange();
var table = cursor.parentElement();
var allTDs = table.parentNode.getElementsByTagName("TD");
alert("# of table columns: " + allTDs.length);


the above code counts the number of TD tags in the current row... that works ok... but how will I modify it to cound the number of rows?

Ps... I already tried changing the getElementsByTagName("TD") to ("TR")!!!!

thanks!!