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

J

jklimek

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)
 
M

michael elias

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.name;
}
</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.
 
M

Mick White

How can I have my input button show me the table of it's parent table?
(eg. "test" in this case)
Click to expand...
....
<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.toLowerCase()){
pa=pa.parentNode;
}
alert(pa.name)
}
</script>

Mick
 
R

RobB

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)
Click to expand...

"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 said:
try this;
(snip)

function showMeParentTableName(oInput){
this.value =
this.parentNode.parentNode.parentNode.parentNode.name;
}
Click to expand...

'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.
Click to expand...

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.
 
G

Grant Wagner

Mick White said:
...
<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.toLowerCase()){
pa=pa.parentNode;
}
alert(pa.name)
}
</script>
Click to expand...

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.toLowerCase()){
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);
}
}
 
T

Thomas 'PointedEars' Lahn

Grant said:
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);
}
}
Click to expand...

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
 
L

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn said:
I'd prefer RegExps here:

function climbTo(element, tagname)
{
var rx = new RegExp(tagname, "i");
Click to expand...

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)
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I find occurrences of a column name FPPaymentID in the entire database (e.g table, stored procedure etc) in SSMS? 2
How can I create a table using the input element? 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Only one table shows up with the information 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
Filter table rows based on multiple checkboxes value 2

Members online

No members online now.
Total: 140 (members: 1, guests: 139)
Robots: 162

Forum statistics

Threads
474,039
Messages
2,570,376
Members
47,032
Latest member
OdellBerg4

Latest Threads

Top