• Registered: May 22, 2009
  • Posts: 1

Topic: highlight a row of a mother table that has an image in a nested table

Hello, I'm new at jquery and im interested to solve the following problem,
to explain myself better, here is an example html code:

<body>

<table width="200" border="1">

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
        <table>
            <tr><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td><a href="#" class="textred">hi</a></td></tr>
            <tr><td>&nbsp;</td></tr>
         </table>
    </td>
    <td><a href="#" class="textred">hello</a></td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td><a href="#">hello</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table>
            <tr><td>&nbsp;</td></tr>
            <tr><td><a href="#" class="textred">hi</a></td></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td></tr>
         </table></td>
    <td><a href="#" class="textred">hello</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   
  </tr>
  <tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    <td><a href="#">hello</a></td>
     <td><table>
            <tr><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td><a href="#" class="textred">hi</a></td></tr>
         </table></td>
  </tr>
    <tr>
    <td>&nbsp;</td><td>&nbsp;</td>
    <td><a href="#" class="textred">hello</a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
 
  </tr>
</table>
-------------------------
the css is simple:
.yellow{background-color:#FF0}
.textred{color:#F00}
-------------------------
the jquery (as far as i got!):
   $(function(){
            $('a.textred').click(function(){;
            $(this).parent().parent().toggleClass('yellow');
            });
   });
--------------------------
THE PROBLEM:

Whether i click on "hi" (the problem is the "hi") or "hello", i would like to highlight the whole row of the 'mother' table, regardless of its position in the embedded table

Thanks very much,
Amor

Vote up Vote down

  • Registered: April 30, 2009
  • Posts: 156
  • Reputation: 2

Re: highlight a row of a mother table that has an image in a nested table

It works big_smile

I'll leave it up to you to figure out what's going on in the code. I've changed the HTML so that the tables have classes.

And jQuery code is changed. The rest is pretty much the same as your code above.

I've commented the jQuery code heavily, so you can understand what's going on.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.yellow{background-color:#FF0}
.textred{color:#F00}
</style>
<script type="text/javascript" src="assets/js/jquery126.js"></script>
<script type="text/javascript">
   $(function(){
        $('a.textred').click(function(){
            // find the parent table & put in variable 'parent'
            var parent = $(this).parent("td").parent("tr").parent("tbody").parent("table");
            // if parent has class 'parentTable'...
            if(parent.hasClass("parentTable")){
                // the $(this) link is NOT in a nested table
                // so we can safely pass $(this) variable to our function
                highlightRow($(this));
            // else if parent has class 'nestedTable'...
            }else if(parent.hasClass("nestedTable")){
                // the $(this) link is inside a nested table
                // we have to pass the Parent table into the function
                highlightRow(parent);
            }
        });
        
        function highlightRow(object){
            // get the parent TR row and put in variable
            var parentRow = object.parent("td").parent("tr");
            // get the parent TR's index inside the 'table.parentTable'
            var index = $(".parentTable tr").index(parentRow);
            // Toggle the class here
            $(".parentTable tr").eq(index).toggleClass("yellow");            
        }
   });
</script>
</head>

<body>
<table width="200" border="1" class="parentTable">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <table class="nestedTable">
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><a href="#" class="textred">hi</a></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
        <td><a href="#" class="textred">hello</a></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><a href="#">hello</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
     <tr>
        <td>
            <table class="nestedTable">
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><a href="#" class="textred">hi</a></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </td>
        <td><a href="#" class="textred">hello</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><a href="#">hello</a></td>
        <td>
            <table class="nestedTable">
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td><a href="#" class="textred">hi</a></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><a href="#" class="textred">hello</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>

Last edited by BeeDev (May 22, 2009 11:08 am)

Vote up Vote down