jquery - Grails:动态填充的表行不是Selectable＆Clickable

Question

我有一个Grails(2.4.3)应用程序，其中使用JSON数据动态填充表行。

现在面临的问题是

在表行中，单击事件不起作用。

鼠标悬停时，

CSS样式在表行中不起作用。

基本上，就用户输入而言，表行已失效，但是我可以使用所需的任何数据更新/填充行。

GSP:

<table id="availUsers">
    <thead>
    </thead>
    <tbody>
    </tbody>
 </table> 

JavaScript:

$("#idText").click(function () {
   id = document.getElementById("userIdText").value;
   if (id) {
      d = {
         userID: id
      };
      $.ajax({
         type: "POST",
         url: "${createLink(action:'searchUsers', controller:'CustomerSupport')}",
         data: d,
         async: false,
         dataType: 'JSON',
         cache: false,
         success: function(result) {
            if (result =='success') {
               $(".headerAvailRd").text("Available Users");
               var thead = $('#availUsers thead');
               thead.empty();
               var initialTR = "<tr>";
               thead.append(initialTR);
               var user = $('<th>'+'User'+'</th>');
               thead.append(user);
               var age = $('<th>'+'Age'+'</th>');
               thead.append(age);
               var status = $('<th>'+'Status'+'</th>');
               thead.append(status);
               var finalTR = "</tr>";
               thead.append(finalTR);

               var tbody = $('#availUsers tbody');
               tbody.empty();
               $.each(result, function(index, val) {
                  var initialTR1 = "<tr class='availRdr'>";
                  tbody.append(initialTR1);
                  var user1 = $('<td>'+val.user+'</td>');
                  tbody.append(user1);
                  var age1 = $('<td>'+val.age+'</td>');
                  tbody.append(age1);
                  var status1 = $('<td>'+"val.status"+'</td>');
                  tbody.append(status1);
                  var finalTR1 = "</tr>";
                  tbody.append(finalTR1);
               });
            } else {
               $(".error").html(result);
            }
         }
      });
   }
});

上面的所有代码都可以正常工作。

因此面临的问题是，表行不可单击和不可选择。我希望能够单击表行，然后获取相应的td的值。

例如，当我单击第1行时，我想获取“用户”值，以便可以将其用于从服务器获取更多信息并显示出来。

可选方式，每行应有一种背景色，并且将鼠标悬停在其上方时，该背景色应发生变化。

有人请告诉我如何使表格行可选和可点击。

提前致谢!

Answer 1

我想您想复制GSP生成表的默认功能。您可以加载数据表并执行检查元素以查看其构造方式。

对于“可选”，您可能仅需要将CSS类添加到。

要进行单击，您将需要生成指向特定用户ID的链接。您可以选择对URL进行硬编码，但正确的方法是从您的 Controller 或使用g:createLink标记。对于g:createLink标记，可以将来自字符串输出的字符串存储在JS变量中(在第一次加载时，不是ajax)，然后处理链接字符串，用行ID替换ID的一部分。