动态表 onclick

Question

我有以下问题希望得到一些帮助。 有一个组合框（选择），我在其中选择一个项目，然后我从 php 中取回一个动态表。该表包含示例名称。名字、姓氏和 ID（隐藏）。当我点击表格时，我得到所选行的 ID 值。到目前为止，它工作正常。事件不想先触发的问题。之后它工作正常，但我首先需要它，因为我有一个自动点击第一行的功能，但这在我解决这个问题之前不起作用。我编写了一个代码，它适用于 html 表。但不是与动态的。请帮忙。

这里的代码可以在动态表中正常工作，但在第二次点击之后：

function nametableclick() {

    var rows = document.getElementById("nametable").rows;
            for(var i = 0; i < rows.length; i++)        
        {                           
             rows[i].onclick = function() 
        {
                    data=(this.cells[3].innerHTML);                 

        var data = data;

            $.ajax({
                type: "POST",
                url: "list.php",
                data: "data="+data,
                Type: "json",
                success: function(msg) {

                    msg = JSON.parse(msg);
                    $("#dob").html(msg.dob);
                    $("#age").html(msg.age);
                    $("#sex").html(msg.sex);

                }
             });            
            };

        };                          
         };

这里的代码运行良好，但仅适用于 html 表： （其实是一样的，不过我用的是onload）

onload = function() {       
    var rows = document.getElementById("nametable").rows;
            for(var i = 0; i < rows.length; i++)        
        {                           
             rows[i].onclick = function() 
        {
                    data=(this.cells[3].innerHTML);                 

            var data = data;

            $.ajax({
                type: "POST",
                url: "list.php",
                data: "data="+data,
                Type: "json",
                success: function(msg) {

                    msg = JSON.parse(msg);
                    $("#dob").html(msg.dob);
                    $("#age").html(msg.age);
                    $("#sex").html(msg.sex);

                }
            });         
        };
    };
    $("#nametable tr:eq(0) td:first-child").click();                            
         };

当我对动态表使用 onload 函数时，它根本不起作用。 感谢您提前提供任何帮助。

Answer 1

这个问题不太适合回答。相反，我会做一些代码分析。

onload = function() ... - 不可怕但有点草率。看起来这可能是全局命名空间泄漏。我假设这应该是window.onload，在这种情况下，我想知道为什么不使用 jQuery 的 ready 事件$(function() { ... })。

var rows = document.getElementById("nametable").rows;
for(var i = 0; i < rows.length; i++) {
  rows[i].onclick = function() { ... };
}

好吧，现在又一次逃离了 jQuery，好像它生病了一样。然后循环遍历 rows 数组只是为了每次构造一个新函数并将它们附加到 onclick（再次避免 jQuery）？在循环中构造函数是一个非常糟糕的主意，大多数 linter 都会大声抱怨这一点。一个建议：

$('#nametable tr').on('click', function() { ... });

这会将点击处理程序附加到表中具有id="nametable" 属性的所有<TR> 行。

data=(this.cells[3].innerHTML);
var data = data;

我的心在这里漏了一拍！首先，您将 HTML 内容拉出（我认为是 global 变量），直到我看到下一行并意识到我们有变量提升。但是请等待您将数据分配给自己。最后，名称data 没有提供任何关于innerHTML 内容的上下文。由于我没有数据，我只能猜测，所以在这些示例中，我将其保留为数据。将来考虑选择为其内容和使用提供上下文的名称。这样，当您阅读代码时，您就不必寻找变量的用途或如何使用它们。

var data = $(this, 'td:eq(3)').text();

最后data的使用是直接拼接成一个post请求。我会假设该服务器 API 不需要 HTML。更不用说通过将数据强制为字符串来避免 jQuery 的参数构建。而是使用 JS 对象：

$.ajax({
  type: 'POST',
  url:  'list.php',
  data: {data: data} // This is a very poorly designed server API
}).then(function(data) {
  ...
});

另外，Type: 'json' 的使用表明您的服务器没有返回正确的 HTTP 标头。首先，jQuery 的 ajax 没有 Type 属性，我认为您想要的是 dataType。但是，需要 dataType 表明服务器没有发送正确的标头。如果 PHP 脚本返回 application/json 而不是 plain/text，那么 jQuery 可以为您解析响应，避免您自己需要 JSON.parse，这可能有点容易出错。

$("#dob").html(msg.dob);
$("#age").html(msg.age);
$("#sex").html(msg.sex);

使用html() 将 HTML 直接注入到您从第三方收到的 DOM 中会受到警告。这是一个很大的跨站脚本漏洞。使用text() 代替将数据推送到DOM，除非您知道并且可以断言您的服务器的信任以及与它的连接（SSL 以避免中间人）。对于这个例子来说可能并不重要，但仍然值得牢记，因为要让它在野外出现非常容易。

$("#nametable tr:eq(0) td:first-child")

当你有一个这样的选择器时，提供上下文挂钩而不是依赖于 DOM 的组成会更容易和可读。将 class="clickable-row" 或 class="person-data dob" 之类的内容添加到您的 HTML 标记中。它有助于维护和可读性。

Answer 2

感谢您的快速回复。我确定是否有很多错误，因为我几周前刚开始学习这个（我的意思是 php html ajax 等。）所以我没有清楚地理解所有内容，我使用了我不应该使用的东西或应该以另一种方式使用。但是有一个简单的程序我想让它完成并从中学习。因此，当我不知道某些事情时，我试图获取一些信息（例如：w3schools.com）或检查与我正在寻找的内容相似的其他主题。

对不起，我离开了

Var data = data;

我的错。不需要那里。我之前在尝试一些东西，然后就离开了。反正没有什么不同。

下一步： onload = function() { 我在另一个主题中发现了已解决的结果，它适用于静态表，但不适用于动态表。 我尝试了以下方法。我没有提到： window.onload = nametableclick;

函数名tableclick() { 数据在这里 }

但也不适用于动态表。

下一步：

var rows = document.getElementById("nametable").rows;
        for(var i = 0; i < rows.length; i++)        
        {                           
            rows[i].onclick = function() 
            {
                data2=(this.cells[3].innerHTML);

它对我的作用是找到选定的行并返回第 3 个（实际上是第 4 个）单元格的值，这是我的 prog 中的 ID。我需要这个因为我想将此值发送到 php 以从 ID = 值的表中获取所有数据。它工作正常。

正如我所提到的，即使它不是最好的方法，prog 也可以正常工作。慢慢地，我会学习如何以更好的方式做到这一点。但目前唯一的问题是动态表 onclick 事件仅在第一次点击后触发。 谢谢，对不起，如果我有点困难。 :-)))

哦，还有 1 件事： “首先，jQuery 的 ajax 没有 Type 属性，我认为你想要 dataType。”

由于某种原因，如果我输入 dataType 它根本不起作用。我不知道为什么。我观看了一些培训视频并阅读了一些关于 ajax 的短期课程，其中一些提到使用 dataType，其中一些只是简单类型。我遵循了一切，但没有为我工作。我又花了 5 个小时来找出为什么我在这里也有一个关于这个问题的话题。 get data from mysql with ajax and json into different textareas 不小心我用大写的 T 试过一次，它奏效了。不知道为什么。