如何在鼠标单击事件时从动态表中选择一行
How to select a row from dynamic table on mouseclick event
如何在鼠标单击或从下面给定的 html 表中checking the checkbox preferably
时获取行的值?
这是使用 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();
这是包含从pv1
填充的表的区域spry
Div
(请参阅 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"> {name}</td>
<td width="22%" align="center"> {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"> {name}</td>
<td width="22%" align="center"> {email}</td>
</tr>
</tbody>
</table>
</div>
</div>
我正在尝试以下代码,但仍然没有收到警报,因此没有一个答案也不起作用。我知道语法 n 都是正确的,但我无法弄清楚这里的问题是什么!
//inside $(document).ready(function()
$("#chkbHead").click(function() {
alert("Hi");
});
我的页面也有其他表格来对齐某些内容。因此,当我使用以下代码时,除了问题中的表外,它可以在这些表上完美运行。这可能是问题所在,因为表中只有 2 个tr
由 spry 数据集填充,因此无法正确识别。也许,我不确定,只是想帮助提高我的理解
$('tr').click(function() {
alert("by");
});
您将获得的
行的值:
$('#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() );
}
};
});
表格行的值到底是什么意思? 您可以像这样获取表行的内部 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();
});
编辑
以下是更改嵌套在表行中的复选框的 checked 属性的方法:
$('tr').click(function() {
$(this).find('input:checkbox').attr('checked', 'checked');
// alternatively make it unchecked
$(this).find('input:checkbox').attr('checked', '');
});
编辑
由于表行是动态加载的 - $().click() 事件绑定方法将不起作用,因为当您调用它时 - 表行不存在,因此 click 事件无法绑定到它们。不要使用 $().click 使用 jQuery live 方法:
$('tr').live('click', function() {
// do stuff
});
这会将 click 事件绑定到所有当前表行以及将来可能添加的所有表行。在此处查看 jQuery 文档
你必须
使用Spry Observer,像这样:
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);
相关文章:
- 允许为显示的每个数据表选择一行
- 从 html 表中选择一行(突出显示)并在单击按钮时发送值
- koGrid-如何用程序选择一行
- 从数据表中选择一行以显示单选按钮值
- 在 jqxGrid 中按一个单元格的值选择一行
- 如何在文本区域中选择(一行或多行)
- Javascript一次选择一行
- 使用javascript选择一行中除RadGrid中的一列外的所有列
- 使用javascript在元素中选择一行文本
- 如何选择一行's单元格,并通过JavaScript获取它们的值
- 如何使用javascript在选中复选框时选择一行单选按钮
- 如何在Jquery数据表中选择一行
- 从生成的html表中选择一行
- 从html表中选择一行,单击按钮即可发送值
- HTML下选择一行<标签在UIWebView
- 引导表,动态地向表和用户添加行,然后突出显示并选择一行
- 根据内容在表中选择一行,然后单击所选行量角器中的链接
- 使用变量从html表中选择一行
- 通过单选按钮选择一行时,将一行数据复制到同一页面的文本字段中
- 如何在鼠标单击事件时从动态表中选择一行