Solved

Table cell parent

Posted on 2004-08-02
10
7,078 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JavaScript Sort Ordering and Choice Limiting 5 38
Only allow one check box 17 37
Non-Resizable Pharagraph 2 17
Glitching Slide Show 19 26
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

679 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