Table cell parent

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
LVL 9
mmuruganandamAsked:
Who is Participating?
 
ZvonkoSystems architectCommented:
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
 
OMC2000Commented:
you could use function like this to get row object
function getParentTR(obj)
{
 
  while( obj && obj.tagName != "TR" )
     obj = obj.parentNode;
  return obj;
}
0
 
OMC2000Commented:
"javascript:onHideClick( this)"


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

  obj.cells(2).innerText = "Hidden"
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mmuruganandamAuthor Commented:
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
 
ZvonkoSystems architectCommented:
???
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
 
mmuruganandamAuthor Commented:
>>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
 
ZvonkoSystems architectCommented:
Yes, there is one.
Read my example and you will see the alternative. Don't you see the ;return false

0
 
mmuruganandamAuthor Commented:
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
 
ZvonkoSystems architectCommented:
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
 
mmuruganandamAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.