Question

在我的ajax调用中，我想将key作为<td>分配给$('#shelf .table thead tr')中的一行。这是我的尝试无效。

AJAX：

function ajax_call($aff){
    $.ajax({                                      
        url: 'fill_crosstab.php',                         
        data: {action:$aff},                                             
        dataType: 'json',                   
        success: function(data){
            $('#shelf .table tbody').empty();

            $('#shelf .table thead tr').empty();
            for ( var i = 0; i < key.length; i++ ) {
                out += "<td>" + key[i] + "</td>"; 
            }
            $('#shelf .table thead tr').append(out + "</tr>");

            if ($aff == "database") {
                $.each(data, function(key, val) {
                    $('.dropdown-menu').append("<a class='dropdown-item' href='#'>" + val.Affiliation + "</a>");
                });
                    // Bind the event now, after the html element has bend created.
                $(".dropdown-menu a").on("click", function () {
                    var selText = $(this).text();
                    $('.shelf-header').empty();
                    $('.shelf-header').append(selText);
                    ajax_call(selText); 
                });
            } else {
                $.each(data, function(key, val) {
                    $('#shelf .table tbody').append("<tr><td>" + val.LAST + "</td><td>" + val.FIRST + "</td><td>" + val.MDC + "</td><td>" + val.RADIO + "</td><td>" + val.eMEDS + "</td><td>" + val.FireApp + "</td><td>" + val.P1 + "</td></tr>"); 
                });
            }
        }
    });
    };

JSON DATA：

[{"LAST":"JONE","FIRST":"MARY","MDC":"07\/23\/2003","RADIO":"08\/22\/2002","eMEDS":"02\/09\/2015","FireApp":"09\/11\/2012","P1":" "}]

Answer 1

如果您需要for循环来创建表格的标题，从数据中提取密钥，则需要使用第一行。

您还应保留该行的键以确保其他行在同一列中排成一行。我注意到你用“。”将那些作为属性放在该片段底部的else子句中。

首先获取这些密钥 - 将其放在成功处理程序的顶部附近：

var keys = Object.keys(data[0]);

现在你可以遍历这个以创建你的第一行（把它放在thead部分）：

for ( var i = 0; i < keys.length; i++ ) {
    out += "<td>" + keys[i] + "</td>"; 
}

在那个其他部分，tbody，你可以做到这一点，以确保它匹配。这引用了上面的键变量，顺序相同，并使用那里的键来查找项目中的值：

$.each(data, function(_k, val) {
    var out = "<tr>";
    for( var i =0; i< keys.length; i++) {
       out += "<td>" + val[keys[i]] + "</td>";
    }
    out += "</tr>";
    $('#shelf .table tbody').append(out);
});

在这里的代码片段中，“_k”是行号，我用下划线作为前缀，让读者清楚我们对它不感兴趣。

将ajax数据val分配给表头

1 个答案: