如何在鼠标点击事件中从动态表格中选择一行

Question

如何从下面给定的html表格中获得鼠标点击或checking the checkbox preferably的行值？

这里是js使用从XML获取值我的表轻快

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

这里是包含被从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> 

的 Div与 spry区

我想下面的代码，但仍然没有得到警报，因此没有答案也无法正常工作。我知道所有的语法都是正确的，但我无法弄清楚这里有什么问题！

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

我的页面也有其他表格用于对齐一些内容。因此，当我使用下面的代码时，它完美地工作在那些除了问题中的表之外的表上。这可能是问题，因为表中只有2 tr被spry数据集填充，因此无法正确识别。可能是，我不知道，只是试图帮助提高我的理解

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

Answer 1

你是什么意思的表行的值？你可以得到一个表行内HTML这样的：

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

你可以得到表行的属性（例如它的ID），象这样：

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

或者你可以得到的值嵌套元素如像这样的文本输入：

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

EDIT

这是如何改变嵌套表中的行中的复选框的选中属性：

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

编辑

如表行被动态加载 - 在$（）点击（）事件绑定方法不起作用，因为当你调用它时 - 表格行不存在，所以click事件不能绑定到它们。而是使用$（）的点击使用jQuery的活法：

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

此结合的Click事件到目前所有的表行，并可能在将来添加的所有表行。See the jQuery docs here

Answer 2

你会得到的一排值：

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

Answer 3

，你必须使用轻快观察， 是这样的：

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