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>
WorknHardrAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
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
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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 StanyonConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.