Jquery Grails：动态填充的表行不可选择&；可点击

我有一个Grails（2.4.3）应用程序，在其中我用JSON数据动态填充表行

我现在面临的问题是,

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

鼠标悬停时，CSS样式在表行中不起作用

就用户输入而言，表行基本上是死的，但是我可以用我想要的任何数据更新/填充行

普惠制：

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

$（“#idText”）。单击（函数（）{
id=document.getElementById（“userIdText”）.value；
如果（id）{
d={
userID:id
};
$.ajax({
类型：“POST”，
url:“${createLink（操作：'searchUsers'，控制器：'CustomerSupport'）}”，
数据：d，
async:false，
数据类型：“JSON”，
cache:false，
成功：功能（结果）{
如果（结果==“成功”）{
$（“.headeravaird”）.text（“可用用户”）；
var thead=$（'availUsers thead'）；
thead.empty（）；
var initialTR=“”；
thead.append（initialTR）；
var user=$（''+'用户'+''）；
附加（用户）；
变量年龄=$（''+'年龄'+''）；
附加（年龄）；
变量状态=$（''+'状态'+''）；
附加（状态）；
var finalTR=“”；
附加（最终）；
变量tbody=$（“#可用者tbody”）；
tbody.empty（）；
$.each（结果、函数（索引、val）{
var initialTR1=“”；
tbody.append（initialTR1）；
var user1=$（''+val.user+''）；
tbody.append（user1）；
var age1=$（''+val.age+''）；
tbody.append（年龄1）；
var status1=$（''+''val.status'+''）；
tbody.append（状态1）；
var finalTR1=“”；
tbody.append（finalTR1）；
});
}否则{
$（“.error”）.html（结果）；
}
}
});
}
});

以上所有代码都正常工作

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

例如，当我单击第1行时，我希望获得“user”值，以便可以使用它从服务器获取更多信息并显示出来

可选意味着，每行应有一个背景色，当鼠标悬停在上面时，该背景色应改变

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

---

提前谢谢

我想您希望复制GSP生成表的默认功能。您可以加载一个数据表并执行一个inspect元素来查看它是如何构造的

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

---

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

我尝试了您建议的一切，但都不起作用。

$("#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);
            }
         }
      });
   }
});