Solved

Table cell parent

Posted on 2004-08-02
10
7,102 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…
Suggested Courses

615 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