javascript - 如何通过鼠标单击事件从动态表中选择一行

Question

如何通过鼠标单击或从下面给定的 html 表中最好选中复选框获取行的值？

这是使用 spry 从 xml 获取表值的 js

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();

这是 Div 和 spry 区域，其中包含从 pv1 填充的表(请参阅 js 部分)

<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>

我正在尝试下面的代码，但仍然没有收到警报，因此没有一个答案也不起作用。我知道语法全部正确，但我无法弄清楚这里的问题是什么!

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

我的页面还有其他表格用于对齐某些内容。因此，当我使用下面的代码时，它在除问题中的表之外的那些表上完美运行。这可能是问题所在，因为表中只有 2 个 tr 由 spry 数据集填充，因此无法正确识别。我不确定，可能只是想帮助提高我的理解

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

Answer 1

您将获得的行的值:

$('#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() );
       }
    };
});