动态表单击

Question

我有以下问题，我想得到一些帮助。这里有一个组合框(select)，在这里我选择一个条目，然后从php中得到一个dinamic表。该表包含示例名称。Firstname，Lastname和ID(隐藏的)。单击该表时，将得到所选行的ID值。到目前为止，它工作得很好。事件不想首先引发的问题。之后，它可以正常工作，但我首先需要它，因为我有一个函数，自动单击第一行，但这不工作，直到我解决了这个问题。我编写了一个代码，它可以很好地处理html表。但不是用迪纳莫的那个。请帮帮忙。

下面的代码可以很好地处理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();                            
         };

当我将onload函数用于dinamic表时，它根本不起作用。谢谢你提前提供帮助。

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'的使用表明您的服务器没有返回正确的headers。首先，jQuery没有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；

函数nametableclick() {这里的数据}

但也不适用于动态表。

下一步：

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

它为我做了什么，它找到所选的行，并返回第三个(实际上是第四个)单元格的值，这是我程序中的ID。我需要这个值，因为我希望将这个值发送给php，以便从ID =值所在的表中获取所有数据。而且效果很好。

正如我前面提到的，这个程序工作得很好，即使它不是最好的方法。慢慢地，我会学会如何做得更好。但目前唯一的问题是，动态表onclick事件只在第一次单击之后触发。谢谢，对不起，如果我的情况有点困难。-))

噢，还有一点：“首先，jQuery的ajax没有，我认为您需要dataType。”

由于某种原因，如果我输入dataType，它就根本不工作了。我不知道为什么。我看了一些培训视频，读了一些关于ajax的短期课程，其中一些提到使用dataType，有些只是简单的类型。我随心所欲，但没有为我工作。我花了大约5个小时再花一天时间来找出为什么我在这里也有一个题目。get data from mysql with ajax and json into different textareas和我偶然尝试了一次大写T，它成功了。不知道为什么。