动态表onclick

Question

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

下面是代码工作正常DINAMIC表只是第2次点击后：

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的ready事件$(function() { ... })。

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

好吧，现在再次从jQuery中逃离，就好像它患病了一些如何。然后循环遍历行的数组，以便每次构建一个新函数并将它们附加到onclick（再次避免使用jQuery）？在循环内构建函数是一个非常糟糕的主意，大多数linters都会大声抱怨。一个建议：

$('#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标头。首先，没有Type财产jQuery的阿贾克斯，而是我认为你想要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;

功能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日）细胞是在我的PROG ID的值。我需要这个COS我想发送这个值到PHP来获取表中的所有数据，其中ID =值。它工作正常。

正如我所提到的，编工作正常，即使它不是最好的方式来做到这一点。慢慢地，我会学习如何更好地做到这一点。但目前唯一的问题是动态表格onclick事件仅在第一次点击后触发。 谢谢并抱歉，如果我有点困难的情况下。:-)））

噢，还有一件事： “首先，没有类型属性的jQuery的ajax，而是我认为你想dataType。”

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