By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,953 Members | 1,131 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,953 IT Pros & Developers. It's quick & easy.

How can I find the name of the parent table from a table cell?

P: n/a
I have something like this:

<table name="test" id="test">
<tr>
<td><input type="button" onClick="showMeParentTableName();"></td>
</tr>
</table>
How can I have my input button show me the table of it's parent table?
(eg. "test" in this case)

Jul 23 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
err, I mean... how can I have the button show me the NAME of it's
parent table.

Jul 23 '05 #2

P: n/a
try this;

<table name="test" id="test">
<tr>
<td><input type="button"
onClick="showMeParentTableName(this);"></td>
</tr>
</table>

<script>
function showMeParentTableName(oInput){
this.value =
this.parentNode.parentNode.parentNode.parentNode.n ame;
}
</script>

notice that you must go up 4 levels in the object hierarchy;

input -> cell -> row -> tablebody -> table

this only applies to IE, firefox needs one less step up.

Jul 23 '05 #3

P: n/a
jk*****@gmail.com wrote:


How can I have my input button show me the table of it's parent table?
(eg. "test" in this case)

....
<td><input type="button" onClick="climbTo(this,'table')"></td>
....

<script type="text/javascript">
function climbTo(element,tagname){
var pa=element.parentNode;
while(pa.tagName.toLowerCase()!=tagname.toLowerCas e()){
pa=pa.parentNode;
}
alert(pa.name)
}
</script>

Mick
Jul 23 '05 #4

P: n/a
jk*****@gmail.com wrote:
I have something like this:

<table name="test" id="test">
<tr>
<td><input type="button" onClick="showMeParentTableName();"></td>
</tr>
</table>
How can I have my input button show me the table of it's parent table?
(eg. "test" in this case)
"name" is not a valid attribute of an HTML table. Use id. Pass the
input object to the function.

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function getTableId(obj)
{
while (obj && !/table/i.test(obj.nodeName))
{
obj = obj.parentNode;
}
return obj.id || '';
}

</script>
</head>
<body>
<table border="1" id="test1">
<tbody>
<tr>
<td>
<input
type="button"
value="test 1"
onclick="alert(getTableId(this))">
</td>
</tr>
</tbody>
</table>
<table border="1" id="test2">
<tbody>
<tr>
<td>
<input
type="button"
value="test 2"
onclick="alert(getTableId(this))">
</td>
</tr>
</tbody>
</table>
</body>
</html>
michael elias wrote: try this;
(snip)
function showMeParentTableName(oInput){
this.value =
this.parentNode.parentNode.parentNode.parentNode.n ame;
}
'this' in the context of a global function points to *window*.

notice that you must go up 4 levels in the object hierarchy;

input -> cell -> row -> tablebody -> table

this only applies to IE, firefox needs one less step up.


Any time you need to give involved instructions like the above, it's
time to use some program logic to *look for* the desired data.

Jul 23 '05 #5

P: n/a

All form elements, Inputs too, have a parent of Form, and form has other
parents and such, instead, use a link in the TD,
..parentElement.parentElement.parentElement of a link on the TD will be the
table, if you use an input, you'd have to go UP more parentElements passed
the Form and who knows what else you have the form in if any.

Danny

On Tue, 21 Jun 2005 07:50:58 -0700, <jk*****@gmail.com> wrote:

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #6

P: n/a
"Mick White" <mw***********@rochester.rr.com> wrote in message
news:r4******************@twister.nyroc.rr.com...
jk*****@gmail.com wrote:

How can I have my input button show me the table of it's parent
table?
(eg. "test" in this case)

...
<td><input type="button" onClick="climbTo(this,'table')"></td>
...

<script type="text/javascript">
function climbTo(element,tagname){
var pa=element.parentNode;
while(pa.tagName.toLowerCase()!=tagname.toLowerCas e()){
pa=pa.parentNode;
}
alert(pa.name)
}
</script>


If this function can't find the tagName it's looking for, it eventually
generates an error:

<span id="blah"></span>
<script type="text/javascript">
function climbTo(element,tagname){
var pa=element.parentNode;
while(pa.tagName.toLowerCase()!=tagname.toLowerCas e()){
pa=pa.parentNode;
}
alert(pa.name)
}
climbTo(document.getElementById('blah'), 'table');
</script>

Something like this might be better:

function climbTo(element, tagname) {
tagname = tagname.toLowerCase();
var parentElement;
while((element = element.parentNode) && !parentElement) {
if (element.tagName.toLowerCase() == tagname) {
parentElement = element;
}
}

// return parentElement;
if (parentElement) {
alert(parentElement.id);
}
}

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #7

P: n/a
Grant Wagner wrote:
If this function can't find the tagName it's looking for, it
eventually generates an error:
[...]
Something like this might be better:

function climbTo(element, tagname) {
tagname = tagname.toLowerCase();
var parentElement;
while((element = element.parentNode) && !parentElement) {
if (element.tagName.toLowerCase() == tagname) {
parentElement = element;
}
}

// return parentElement;
if (parentElement) {
alert(parentElement.id);
}
}


I'd prefer RegExps here:

function climbTo(element, tagname)
{
var rx = new RegExp(tagname, "i");
var parentElement;
while ((element = element.parentNode) && !parentElement)
{
if (element.tagName.test(rx))
{
parentElement = element;
}
}

// return parentElement;
if (parentElement)
{
alert(parentElement.id);
}
}
PointedEars
Jul 23 '05 #8

P: n/a
Thomas 'PointedEars' Lahn <Po*********@web.de> writes:
I'd prefer RegExps here:

function climbTo(element, tagname)
{
var rx = new RegExp(tagname, "i");
You should at least anchor the match, i.e.,
var rx = new RegExp("^"+tagname+"$", "i");

Otherwise tagnames that are substrings of other tag names can
give incorrect matches (which will probably not happen for valid
HTML, but might as well be safe).

.... if (element.tagName.test(rx))
{
parentElement = element;
} .... if (parentElement)


I'm not sure the original poster had thought this through enough for
it to be generalized. This code will find the outermost enclosing
element matching the tag name, not the innermost one. That might be
desired behavior in this case, but in general, I'd more likely be
needing the nearest enclosing element.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.