Question

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

这里的代码可以正常使用dinamic表，但是在第二次点击之后：

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

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

Answer 1

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

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

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

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

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

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

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

我的心跳在这里跳了一下！首先，将 HTML 内容拉出（我认为是全局变量），直到我看到下一行，并意识到我们有变量提升。但是等待你自己分配数据。最后，名称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的组成。在HTML标记中添加class="clickable-row"或class="person-data dob"等内容。它使维护和可读性。

Answer 2

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

抱歉，我离开那里

Var data = data;

我的错误。不需要那里。我之前正在尝试一些东西并离开那里。反正没有任何不同。

下： onload = function（）{ 我在另一个主题中找到了解决结果，它适用于静态表但不适用于动态。我尝试了以下内容。我没有提到： window.onload = nametableclick;

function nametableclick（）{ 数据在这里 }

但也不适用于动态表。

下一步：

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个）单元格的值，这是我的编程中的ID。我需要这个cos我想将这个值发送到php来获取表中ID =值的所有数据。它工作正常。

正如我所提到的那样，即使不是最好的方法，编程也能正常工作。慢慢地，我会学习如何更好地做到这一点。但目前唯一的问题是动态表onclick事件仅在第一次点击后才会触发。谢谢，对不起，如果我有点困难的情况。： - ）））

哦还有一件事：＆＃34;首先，jQuery没有Type属性，而我认为你想要dataType。＆＃34;

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

动态表onclick

2 个答案: