Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 845
  • Last Modified:

JQuery ASP Gridview Closest Cell Value?

I have a click event to get the clicked cell value and the cell in the row below. Trying to sum two cells. The code below worked fine before I added the 'closest' syntax. Ultimately I need to loop through the entire grid comparing grid cells. Help

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function ()
    {
        $("#GridView1 td").click(function ()
         {
            alert('top:' = $(this).html() + '  bottom:' + $(this).closest('tr').find('td').html() );

            //alert($(this).html());
        });
    });

</script>
0
WorknHardr
Asked:
WorknHardr
  • 3
  • 3
2 Solutions
 
Chris StanyonCommented:
$(this).closest('tr') will find the current row of the clicked TD. You then run find('td') which will find all TDs in that row as an array, so you can't just read the html() of it. You'd need to loop through the array.

Which cell are you expecting to get by using the closest() function
0
 
WorknHardrAuthor Commented:
I need to compare value of 'cell1' with value of 'cell2'

[Gridview]
Header       Column1
Row1            [cell1]
Row2            [cell2]
...
Footer

Open in new window

0
 
Chris StanyonCommented:
OK. Basically, you'll need to get the index of the clicked TD, and then traverse to the next TR, and then select the TD from the same index:

$('#GridView1 td').click(function() {
    TDindex = $(this).index();
    topVal = $(this).html();
    bottomVal = $(this).closest('tr').next().children().eq(TDindex).html();

    alert('Top:' + topVal + ' | Bottom:' + bottomVal);    
})

Open in new window

You can see a working copy here: http://jsfiddle.net/ChrisStanyon/KXx7c/
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
WorknHardrAuthor Commented:
Excellent!

Curious, how do I use the bottomVal object?

It does NOT work like this for sure:

 if (topVal != bottomVal) {
                $(bottomVal).addClass("grdCell");
            }

<style type="text/css">
.grdCell
{
    background-color:Yellow;
}
</style>
0
 
Chris StanyonCommented:
OK. In my code bottomVal is just the html() value of the TD. If you want to get the actual TD, then just drop off the html() call at the end of the selector:

//get the html value
topVal = $(this).html();

//get the actual TD from below
bottomVal = $(this).closest('tr').next().children().eq(TDindex);

//Now compare the 2
if (topVal != bottomVal.html()) {
    bottomVal.addClass('grdCell');
}

Open in new window

I've updated the fiddle for you to see it in action
0
 
WorknHardrAuthor Commented:
Excellent! thx...
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.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now