在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

将您的代码与 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 3

试试这个

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

Answer 4

在您的代码中，您在 id 上提供点击事件

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

所以它不起作用，因为 div 的 id 必须是唯一的。用类名更改您的行 ID，然后它会正常工作

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

参考以下链接

Demo Link

表格 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");
});