Solved

Table cell parent

Posted on 2004-08-02
10
7,073 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

829 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