点击除第一个td以外的行

6

我试图点击一个表格行并执行某个操作。但是,如果他们点击第一个<td>单元格,我不希望它执行该操作。

这是我到目前为止的代码:

jQuery('#dyntable tbody tr').live('click', function () {
        nTr = jQuery(this)[0];

        openMessage(oTable, nTr);
    });

这个代码可以正常工作,但是第一个 <td> 有一个复选框,所以如果用户点击该单元格,我不想调用 openMessage(oTable, nTr); 函数。

我仍然需要让nTr等于该行的内容。


1
这个链接可能会很有用:https://dev59.com/1lzUa4cB1Zd3GeqP7-1U#8019830 - Dalen
听起来你想创建一个标题。为什么不使用<th>标签呢? - Greg Inozemtsev
4个回答

15

利用行内点击目标,检查 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);
}
});

live()已经被弃用,如果使用jQuery版本大于1.7,请转换为on()。下面假设主表是页面中的固定资产。

jQuery('#dyntable').on('click','tbody tr', function (evt) {
    var $cell=$(evt.target).closest('td');
    if( $cell.index()>0){
       openMessage(oTable, this);
   }
});

你的代码中这一行是多余的,它只是返回与this相同的内容。

nTr = jQuery(this)[0];

我已经成功地让它工作了,并且也会转换为使用.on。谢谢 :) - James Wilson

11
 $("#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
这个可以解决问题:
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');    
}

这里有一个用于测试的fiddle链接:DEMO

对我来说,?? 在除每行第一个单元格之外的所有行上都有效。 - jeschafe

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接