我正在尝试单击表格行并执行操作。但是,如果他们单击第一个<td>
单元格,我不希望它执行操作。
这是我到目前为止的代码:
jQuery('#dyntable tbody tr').live('click', function () {
nTr = jQuery(this)[0];
openMessage(oTable, nTr);
});
这是按预期工作的,但第一个<td>
有一个复选框,因此如果他们点击该单元格,我不想调用o penMessage(oTable, nTr);
函数。
我还需要nTr
来=行的内容。
答案 0 :(得分:12)
在行内使用点击目标,并检查TD的索引
简化演示:http://jsfiddle.net/WLR9E/
jQuery('#dyntable tbody tr').live('click', function (evt) {
var $cell=$(evt.target).closest('td');
if( $cell.index()>0){
openMessage(oTable, this);
}
});
如果使用jQuery&gt; = 1.7转换为on(),则不推荐使用live()。以下假设主表是页面中的永久资产。
jQuery('#dyntable').on('click','tbody tr', function (evt) {
var $cell=$(evt.target).closest('td');
if( $cell.index()>0){
openMessage(oTable, this);
}
});
您的代码中的这一行是redindant,它只返回与this
nTr = jQuery(this)[0];
答案 1 :(得分:9)
$("#dyntable tbody").on('click', 'tr td:not(:first-child)',function () {
alert("success");
});
$(document).ready(function ()
{
$("#tbluserdata tbody").on('click', 'tr td:not(:first-child)', function () {
alert("write code");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<table border="2" width="50%" id="tbluserdata">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aaa</td>
<td>ccc</td>
<td>delete</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>ccc</td>
<td>delete</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>ccc</td>
<td>delete</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 2 :(得分:2)
这就是诀窍:
jQuery('#dyntable tbody tr td:not(:first)').live('click', function () {
nTr = jQuery(this).parent('tr')[0];
openMessage("asdf", nTr);
});
function openMessage(oTable, nTr){
console.log(nTr);
alert('something happened');
}
这是测试的小提琴:DEMO
答案 3 :(得分:0)
您可以尝试向该<td>
元素添加类或唯一ID。然后在你的处理程序中测试它。
jQuery('#dyntable tbody tr').live('click', function () {
var $thisRow = jQuery(this); // cache this selector for performance
nTr = $thisRow[0];
if (!$thisRow.hasClass('not_this_one')){
openMessage(oTable, nTr);
}
});