javascript - How to select a row from dynamic table on mouseclick event - Stack Overflow

admin管理员组

文章数量:1435859

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");
});

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");
});

• javascript
• jquery
• html
• spry

Share Improve this question Follow edited May 12, 2011 at 8:58 AabinGunz asked May 12, 2011 at 8:23 AabinGunzAabinGunz 12.4k5454 gold badges150150 silver badges220220 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The values of a Row you will get with:

$('#tableDg tbody tr').live( 'click', function (event) {
    $(this).find('td').each( function( index, item ) {
       if ( $(this).has(':checkbox') ) {
          alert( $(this).find(':checkbox').val() );
       } else {
          alert( $(this).text() );
       }
    };
});

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

you have to use Spry Observer, something like this:

function funcObserver(notificationState, notifier, data) {
    var rgn = Spry.Data.getRegion('configDiv');
    st = rgn.getState();
    if (notificationState == "onPostUpdate" && st == 'ready') {
        // HERE YOU CAN USE YOUR JQUERY CODE
        $('#tableDg tbody tr').click(function() {
            $(this).find('input:checkbox').attr('checked', 'checked');
            // alternatively make it unchecked
            $(this).find('input:checkbox').attr('checked', '');
        });
    }
}
Spry.Data.Region.addObserver("configDiv", funcObserver);

本文标签： javascriptHow to select a row from dynamic table on mouseclick eventStack Overflow