如何使用 Ajax 动态且正确地填充表格？

Question

我有一个表单，用户在其中提交查询，然后有一个处理该查询并以 XML 形式返回结果的 Servlet。由于这个结果试图通过 Ajax 动态填充一个表，为此，我使用下面的代码。

var thead = $("<thead>");
var rowsTHead = $("<tr>");
var tbody = $("<tbody>");
var numberOfColumns;

$(xml).find("head").each(function(){
  var variable = $(this).find("variable");
   numberOfColumns = variable.length;
   for (var i = 0; i < variable.length; i++){
     var name = $(variable[i]).attr("name");
     rowsTHead.append($("<th>").html(name));
   }
});
thead.append(rowsTHead);

$(xml).find("result").each(function(){
   var literal = $(this).find("literal");
   var rowsTBody = $("<tr class=\"even\">");

   literal.length = numberOfColumns;
   for (var j = 0; j < literal.length; j++){
      var tdBody = $("<td>");
      tdBody.html($(literal[j]).text());
      rowsTBody.append(tdBody);
   }
   tbody.append(rowsTBody);
});

$(".tablesorter").empty()
 .append(thead)
 .append(tbody);

此代码在用于 UNION 查询之前运行良好。使用 UNION 时，返回的 xml 以下列方式出现http://pastebin.com/y7hXK1Zy

可以看出，这个查询有 4 个变量，它们是：gn1、indication1、gn2、indication2。 问题是所有变量的值都写在对应于gn1和indication1的列中。

我希望将每个变量的值写在其对应的列中。我想知道我应该对我的代码进行哪些更改才能实现这一点。

Answer 1

您需要尊重绑定元素的名称值，并将它们与您通过解析元素正确构建的列相关联。当您进行查找“文字”时，您将跳过绑定元素的解析。您应该找到“绑定”，尊重名称并根据该名称查找要使用的列，然后为每个列找到实际值的“文字”元素。