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

上面的所有代码都有效。

所面临的问题是，表行不可点击＆amp;可选。我希望能够单击表行，然后获取相应td的值。

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

可选择意味着每行应该有一个背景颜色，当鼠标悬停在其上方时，此背景颜色应该会改变。

有人请告诉我如何制作表格行Selectable＆amp;点击。

提前致谢！

Answer 1

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

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

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

Grails：动态填充的表行不是可选择的＆amp;可点击

1 个答案: