Question

How can get a row’s value on mouse click or checking the checkbox preferably from the below given html table?

Here is the js for getting values for my table from a xml using spry

var ds1 = new Spry.Data.XMLDataSet("xml/data.xml", "rows/row"); 
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize: 10 , forceFullPages:true, useZeroBasedIndexes:true});
var pvInfo = pv1.getPagingInfo();

Here is the Div with spry region containing the table that gets populated from pv1 (see js part)

<div id="configDiv" name="config" style="width:100%;" spry:region="pv1">

    <div spry:state="loading">Loading - Please stand by...</div>
    <div spry:state="error">Oh crap, something went wrong!</div>

    <div spry:state="ready">

    <table id="tableDg" onclick="runEffect('Highlight', 'trEven', {duration: 1000, from: '#000000', to: '#805600', restoreColor: '#805600', toggle:true}, 'Flashes a color as the background of an HTML element.')"
    style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"> 

    <thead>
     <tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB"> 
         <th width="2%"><input id="chkbHead" type='checkbox' /></th>
         <th width="10%" align="center" spry:sort="name"><b>Name</b></th> 
         <th width="22%" align="center" spry:sort="email"><b>Email</b></th> 

     </tr>
     </thead>

     <tbody spry:repeat="pv1">   
     <tr class="trOdd"   
     spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #FFFFFF"> 
         <td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
         <td width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{email}</td> 

     </tr> 

     <tr class="trEven" name="trEven" id="trEven"
     spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
        style="color :#2F5882;background-color: #EDF1F5;"> 
         <td><input type="checkbox" class = "chkbCsm"></input></td>
         <td id="tdname" width="10%" align="center">&nbsp;&nbsp;{name}</td> 
         <td width="22%" align="center">&nbsp;&nbsp;{email}</td> 

     </tr>
     </tbody>
     </table> 
     </div>
     </div>

I am trying the below code but still I am not getting the alert and hence none of the answers are also not working. I know the syntax n all are everything correct, but i am not able to figure out what is the problem here!

//inside $(document).ready(function()
$("#chkbHead").click(function() {
    alert("Hi");
});

My page has other tables too for aligning some contents. So when I use the below code it works perfectly on those tables except the one in the question. It might be the problem because there are only 2 tr in the table which gets populated by a spry dataset and hence not getting identified properly. May be, I am not sure, just trying to help improve my understanding

$('tr').click(function() {
    alert("by");
});

Answer 1

What exactly do you mean by value of a table row? You can get the inner html of a table row like this:

var html = '';
$('tr').click(function() {
    html = $(this).html();
});

You can get attributes of the table row (e.g. it’s Id) like so:

var id = '';
$('tr').click(function() {
    id = $(this).attr('id');
});

Alternatively you can get the value of nested elements such as a text input like so:

var text = '';
$('tr').click(function() {
    text = $(this).find('#myTextBox').val();
});

EDIT

This is how to change the checked attribute of a checkbox nested in a table row:

$('tr').click(function() {
    $(this).find('input:checkbox').attr('checked', 'checked');
    // alternatively make it unchecked
    $(this).find('input:checkbox').attr('checked', '');
});

EDIT

As the table rows are being loaded dynamically – the $().click() event binding method will not work, because when you are calling it – the table rows do not exist, so the click event cannot be bound to them. Instead of using $().click use the jQuery live method:

$('tr').live('click', function() {
    // do stuff
});

This binds the click event to all current table rows and all table rows that may be added in the future. See the jQuery docs here