使表行在jsp中可點擊

Question

我有表行，我想讓整個行都可點擊。為此，我對以下ajax代碼進行了正確處理：

$(document).ready(function() {
    $('#myrow').click(function ()
    {
        //alert("hi");
        $.ajax({

            type: "post",
            url: "shownotification.jsp", 
            data: {
                notifyidd: $('#notifyidd').val(),
                notifyuser: $('#notifyuser').val()

            },
            success: function(msg){      
                    //if(msg == "success")
                    alert('Data updated.');
                    window.location.reload();
            }
        });
    });

});

但是問題在於，它只是使我的第一行可點擊，而其他所有行仍然沒有。 可能是什么原因？ 請幫忙。

Answer 1

似乎當前您的tr具有重復的id ，請嘗試應用類：

<tr class="myrow" ......

然后您可以使用. 按類別定位元素：

$(document).ready(function() {
    $('.myrow').click(function () {
        // Your code here
    });
});

Answer 2

嘗試這個

$(document).on('click', '#table-id tr', function() {
    alert('Hello');
});

Answer 3

使用on綁定您的代碼，並使用之前的代碼完成

HTML

<table>
 <tbody> 
   <tr class="myrow">.......
   </tr>
 </tbody>
</table>

jQuery的

你可以嘗試兩種方法

$(document).ready(function() {
    $('.myrow').click(function ()
    {
//your stuff

    });

/***or can try this below method**/
$('table').on('click', 'tr', function() {
   //your stuff 
});

});

Answer 4

在您的代碼中，您正在為id提供點擊事件

即$('#myrow').click(function ()

因此它不起作用，因為div的id必須唯一。 用類名更改行ID，然后它將正常工作

$('.myrow').click(function ()

請參考以下鏈接以供參考

演示鏈接

表格HTML是

 <table style="width:300px">
<tr class="tableRow">
  <td>Jill</td>
  <td>Smith</td>        
  <td>50</td>
  </tr>
<tr class="tableRow">
  <td>Eve</td>
  <td>Jackson</td>      
  <td>94</td>
</tr>

<tr class="tableRow">
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
</table>

點擊事件的腳本

$(".tableRow").click(function(e){
  alert("Table Tr Clicked");
});