將jQuery函數應用於表格行但不是第一個表格數據

我有一個包含多行的表格。點擊每一行會將用戶重定向到唯一的網址。我的問題是如何應用表格行上的單擊事件，但td與動作類不應該受可點擊行的影響？我試過了：不是jQuery選擇器，但不幸的是我對jQuery很新。謝謝！將jQuery函數應用於表格行但不是第一個表格數據

這裏是我的表：

<table id="tblHotel"> 
<thead> 
    <tr> 
     <th class="sorting_disabled">&nbsp;</th> 
     <th>ID</th> 
    </tr> 
</thead> 
<tbody> 
    <tr id="1" > 
     <td class="actions"> 
      <a href="hotel/update/1"><i class="icon-pencil"></i> Edit</a> 
      <a href="#"><i class="icon-trash"></i> Delete</a> 
     </td> 
     <td>1</td> 
    </tr> 
</tbody>

這裏是jQuery的AJAX：

$("#tblHotel tbody tr").click(function(){ 

var hotelid = $(this).attr('id'); 
$.ajax({ 
    type: "POST",     
    url: "<?=site_url('hotel/view')?>/" + hotelid, 
    success: function(data){ 
     $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300); 
    }, 
    error: function(){ 
     alert('error!'); 
    }      
}); 
}).not('tr td.actions');

來源

2013-08-22 mark yorky

嘗試

//use td instead of tr and filter out td.actions 
$("#tblHotel tbody td:not(.actions)").click(function(){ 

    var hotelid = $(this).closest('tr').attr('id'); 
    $.ajax({ 
     type: "POST",     
     url: "<?=site_url('hotel/view')?>/" + hotelid, 
     success: function(data){ 
      $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300); 
     }, 
     error: function(){ 
      alert('error!'); 
     }      
    }); 
})

或停止事件傳播210

$("#tblHotel tbody td.actions").click(function(e){ 
    e.stopPropagation() 
})

來源

2013-08-22 12:40:18

怎麼樣的價值每個tr的id是多少？這有多行與獨特的ID .. –

@markyorky對不起，我沒有得到你的意思， –

這工作！謝謝:) @Arun –

您可以檢查被點擊一下，試試這個：

$("#tblHotel tbody tr").click(function(e){ 
    if($(e.target).is('.actions')) return false; 
    var hotelid = $(this).attr('id'); 
    $.ajax({ 
     type: "POST",     
     url: "<?=site_url('hotel/view')?>/" + hotelid, 
     success: function(data){ 
      $('.hiddenSidebar').html(data).show('slide', { direction: 'right' }, 300); 
     }, 
     error: function(){ 
      alert('error!'); 
     }      
    }); 
});

來源

2013-08-22 12:41:57

你需要'返回false'或使用'e.stopPropagation（）'，否則事件會冒泡到'TR'，'.is（）'檢查將失敗。 – Barmar

感謝您的糾正@Barmar –

問題是當我點擊編輯鏈接警報（'錯誤！'）不斷彈出。 –

$("#tblHotel tbody tr").not('td.actions').click(function() { 
    var hotelid = $(this).attr('id'); 
    $.ajax({ 
     type: "POST", 
     url: "<?=site_url('hotel/view')?>/" + hotelid, 
     success: function (data) { 
      $('.hiddenSidebar').html(data).show('slide', { 
       direction: 'right' 
      }, 300); 
     }, 
     error: function() { 
      alert('error!'); 
     } 
    }); 
});

jsFiddle

而且，如果你正在使用jQuery UI的，你的圖標類應該像這個：

<table id="tblHotel"> 
    <thead> 
     <tr> 
      <th class="sorting_disabled">&nbsp;</th> 
      <th>ID</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="1"> 
      <td class="actions"> <a href="hotel/update/1"><i class="ui-icon ui-icon-pencil" title="Edit"></i></a> 
<a href="#"><i class="ui-icon ui-icon-trash" title="Delete"></i></a> 
      </td> 
      <td>1</td> 
     </tr> 
    </tbody>

來源

2013-08-22 12:47:29 DevlshOne

將jQuery函數應用於表格行但不是第一個表格數據

回答

相關問題