Solved

Table cell parent

Posted on 2004-08-02
10
7,045 Views
Last Modified: 2008-03-17
Hi,

I have a table.  It contains few anchors and on click of the anchor, I have to change the status in a different column of the same row.  I could have given the row number, and based on that, I would have changed the column.  The table is sortable and the rows would change then.  So I want to use the parent node and access the row of a table.

Below is the example,

<html>
<head>
<title>Sorting the Table</title>
<script type="text/javascript" language="JavaScript1.1">

function onHideClick(tableName, obj)
{
      var table = document.all(tableName)

      rowObject = obj.parentNode.parentNode
      rowObject.cells(2).innerText = "Hidden"
}
</script>

</head>

<body>
      <table id="myTable" border="1">
            <tr>
                  <th>One</th>
                  <th>Two</th>
                  <th>Three</th>
            </tr>
            <tr>
                  <td><a href="javascript:onHideClick('myTable', this)"><img src="" name="hello" alt="Hide"></a></td>
                  <td>One Two</td>
                  <td>One Three</td>
            </tr>
            <tr>
                  <td><a href="javascript:onHideClick('myTable', this)"><img src="" name="hello" alt="Hide"></a></td>
                  <td>Two Two</td>
                  <td>Two Three</td>
            </tr>
      </table>
</body>
</html>

>>>
<td><a href="javascript:onHideClick('myTable', this)"><img src="" name="hello" alt="Hide"></a></td>

If I change this to
<td><img src="" name="hello" alt="Hide" onclick="javascript:onHideClick('myTable', this)"></td>

The above code is working.

But I need the anchor tag desperately.

I can't reply to you immediately, as i am going to be away for sometime.

Regards,
Muruga
0
Comment
Question by:mmuruganandam
  • 4
  • 4
  • 2
10 Comments
 
LVL 15

Expert Comment

by:OMC2000
ID: 11692951
you could use function like this to get row object
function getParentTR(obj)
{
 
  while( obj && obj.tagName != "TR" )
     obj = obj.parentNode;
  return obj;
}
0
 
LVL 15

Assisted Solution

by:OMC2000
OMC2000 earned 200 total points
ID: 11692958
"javascript:onHideClick( this)"


function getParentTR(obj)
{
 
  while( obj && obj.tagName != "TR" )
     obj = obj.parentNode;

  obj.cells(2).innerText = "Hidden"
}
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 300 total points
ID: 11694400
Here my example using the parentNode loop proposed by OMC2000 :

<html>
<head>
<title>Sorting the Table</title>
<script type="text/javascript" language="JavaScript1.1">
function onHideClick(theLink){
    var theRow = theLink.parentNode;
    while(theRow.nodeName!="TR"){
      theRow = theRow.parentNode;
    }
    theRow.cells[2].innerHTML = "Hidden"
}
</script>
</head>
<body>
    <table id="myTable" border="1">
         <tr>
              <th>One</th>
              <th>Two</th>
              <th>Three</th>
         </tr>
         <tr>
              <td><a href="#" onClick="onHideClick(this);return false"><img src="" name="hello" alt="Hide"></a></td>
              <td>One Two</td>
              <td>One Three</td>
         </tr>
         <tr>
              <td><a href="#" onClick="onHideClick(this);return false"><img src="" name="hello" alt="Hide"></a></td>
              <td>Two Two</td>
              <td>Two Three</td>
         </tr>
    </table>
</body>
</html>

0
 
LVL 9

Author Comment

by:mmuruganandam
ID: 11700730
This works fine...

Here is my question..

Can't I have the javascript function call in the onClick itself.  If so, how can I achieve that?

<a href="#" onClick="onHideClick(this);return false"> instead <a href="onHideClick(this)">
0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 300 total points
ID: 11701154
???
Compare your last question and my example, isn't that what you asking for?

And if you are asking: why puting the JavaScript call in the onClick and not in href is the answer: in href you do not get the reference to the anchor object in the predefined reference "this".

And the syntax for javascript in href is with a javascript: prefix.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 9

Author Comment

by:mmuruganandam
ID: 11701229
>>Can't I have the javascript function call in the onClick itself.

Typo, sorry about that.

what my question was, Can't I have the javascript function call in the href itself.


Okie... Currently i have used,

<a href="javascript:void(0)" onClick="onHideClick(this)">
This works for me now.

href="#" takes me to the top of the page.

Is there any other alternate... apart from this.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11701253
Yes, there is one.
Read my example and you will see the alternative. Don't you see the ;return false

0
 
LVL 9

Author Comment

by:mmuruganandam
ID: 11701504
Though OMC2000 makes the first move, his answer doesn't solve my problem
I mean, onclick of A HREF is first given by Zvonko.

Thanks to you both... You both deserves the points for making me run without any problems.

Thanks again!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11701547
You are welcome.
And be encouraged to split points as soon you get get helped by several experts.
Please also be aware that this is not a competition who is first stating somthing like in a Quiz.
Your points is your only way to say: Thank You for your valuable time. Not more and not less.

See you,
Zvonko
0
 
LVL 9

Author Comment

by:mmuruganandam
ID: 11701656
Accepted...  He has given me a way to go levels beyound to get the TR parent... That is the reason why he got the point
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now