使用javascript ajax根据名称和显示对表数据进行排序

无论何时加载页面，都必须加载ShipmentDetails.xml中的数据并按排序顺序显示

ShipmentDetails.xml

查尔斯
46789056
印度
北美
05/06/2017
26/06/2017
雅利安人
46789696
德里
希腊
09/06/2017
30/06/2017
爱德华
98767894
浦那
意大利
25/06/2017
05/07/2017
紫菀
88950075
意大利
加利福尼亚
25/08/2017
06/09/2017
马利卡
88950075
日本
中国
25/07/2017
29/07/2017
维克兰特
98765240
纽约
钦奈
03/07/2017
10/07/2017

以下是我用来加载数据的代码：-

function loadDataAndShowMessage() {
  var xhttp;

  if(window.XMLHttpRequest){
    xhttp = new XMLHttpRequest();
  }
  else{
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }



  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "ShipmentDetails.xml", true);
  xhttp.send();

}

function myFunction(xml) {
  var count = 0;
  var strTable = "<table border='1' id='resultTable'><thead><tr><th>Name</th><th>ShipmentId</th><th>Source</th><th>Destination</th><th>Start Date</th><th>Delivered Date</th></tr</thead><tbody>";
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("shipment");
  //var enteredText = document.getElementById("name").value;
  for (var i = 0; i < x.length; i++) {
    var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var shipmentId = x[i].getElementsByTagName("shipmentId")[0].childNodes[0].nodeValue;
    var source = x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
    var destination = x[i].getElementsByTagName("destination")[0].childNodes[0].nodeValue;
    var startDate = x[i].getElementsByTagName("startDate")[0].childNodes[0].nodeValue;
    var delDate = x[i].getElementsByTagName("deliveredDate")[0].childNodes[0].nodeValue;
    strTable += "<tr><td id=\"name\">" + name + "</td>"+"<td>" + shipmentId + "</td><td>"
    + source + "</td><td>" + destination + "</td><td>"
    + startDate + "</td><td>" + delDate + "</td></tr>";

  }
  document.getElementById("result").innerHTML = strTable + "</tbody></table>";

}


   Create a file named index.html
Create a file named script.js
The xml file name should be ShipmentDetails.xml.
Get the details about the shipments from the xml file using AJAX and sort them based on name in ascending order.

函数loadDataAndShowMessage（）{
var-xhttp；
if（window.XMLHttpRequest）{
xhttp=newXMLHttpRequest（）；
}
否则{
xhttp=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
我的职能（本）；
}
};
open（“GET”，“ShipmentDetails.xml”，true）；
xhttp.send（）；
}
函数myFunction（xml）{
var计数=0；
var strTable=“NameShipmentIdSourceDestinationStart DateDelivered Date我认为您首先需要对数组进行排序

x.sort(function(a, b) {
 var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});

x.sort（函数（a，b）{
var textA=a.getElementsByTagName（“名称”）[0].childNodes[0].nodeValue；
var textB=b.getElementsByTagName（“名称”）[0]。子节点[0]。节点值；
返回（textAtextB）？1:0；
});

然后在上面循环，希望这有帮助
我想您首先需要对数组进行排序

x.sort(function(a, b) {
 var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});

x.sort（函数（a，b）{
var textA=a.getElementsByTagName（“名称”）[0].childNodes[0].nodeValue；
var textB=b.getElementsByTagName（“名称”）[0]。子节点[0]。节点值；
返回（textAtextB）？1:0；
});

然后在上面循环，希望这有助于您更新的myFunction

function myFunction(xml) {
  var count = 0;
  var strTable = "<table border='1' id='resultTable'><thead><tr><th>Name</th><th>ShipmentId</th><th>Source</th><th>Destination</th><th>Start Date</th><th>Delivered Date</th></tr</thead><tbody>";
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("shipment");

  //convert HTMLCollection to an array and run sort method on it
  x = Array.from(x);
  x.sort(function(a, b) {
    var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
  });

  //var enteredText = document.getElementById("name").value;
  for (var i = 0; i < x.length; i++) {
    var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var shipmentId = x[i].getElementsByTagName("shipmentId")[0].childNodes[0].nodeValue;
    var source = x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
    var destination = x[i].getElementsByTagName("destination")[0].childNodes[0].nodeValue;
    var startDate = x[i].getElementsByTagName("startDate")[0].childNodes[0].nodeValue;
    var delDate = x[i].getElementsByTagName("deliveredDate")[0].childNodes[0].nodeValue;
    strTable += "<tr><td id=\"name\">" + name + "</td>"+"<td>" + shipmentId + "</td><td>"
    + source + "</td><td>" + destination + "</td><td>"
    + startDate + "</td><td>" + delDate + "</td></tr>";

  }
  document.getElementById("result").innerHTML = strTable + "</tbody></table>";

}

函数myFunction（xml）{
var计数=0；
var strTable=“NameShipmentIdSourceDestinationStart DateDelivered Date您更新的myFunction

function myFunction(xml) {
  var count = 0;
  var strTable = "<table border='1' id='resultTable'><thead><tr><th>Name</th><th>ShipmentId</th><th>Source</th><th>Destination</th><th>Start Date</th><th>Delivered Date</th></tr</thead><tbody>";
  var xmlDoc = xml.responseXML;
  var x = xmlDoc.getElementsByTagName("shipment");

  //convert HTMLCollection to an array and run sort method on it
  x = Array.from(x);
  x.sort(function(a, b) {
    var textA = a.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var textB = b.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
  });

  //var enteredText = document.getElementById("name").value;
  for (var i = 0; i < x.length; i++) {
    var name = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    var shipmentId = x[i].getElementsByTagName("shipmentId")[0].childNodes[0].nodeValue;
    var source = x[i].getElementsByTagName("source")[0].childNodes[0].nodeValue;
    var destination = x[i].getElementsByTagName("destination")[0].childNodes[0].nodeValue;
    var startDate = x[i].getElementsByTagName("startDate")[0].childNodes[0].nodeValue;
    var delDate = x[i].getElementsByTagName("deliveredDate")[0].childNodes[0].nodeValue;
    strTable += "<tr><td id=\"name\">" + name + "</td>"+"<td>" + shipmentId + "</td><td>"
    + source + "</td><td>" + destination + "</td><td>"
    + startDate + "</td><td>" + delDate + "</td></tr>";

  }
  document.getElementById("result").innerHTML = strTable + "</tbody></table>";

}

函数myFunction（xml）{
var计数=0；
var strTable=“NameShipmentIdSourceDestinationStart DateDelivered Date我首先将xml转换为json，然后使用数组的排序方法，并使用localeCompare函数将其与进行比较，json格式还可以帮助更轻松地使用模板文本构建模板


//您不再需要ActiveXObject
函数loadDataAndShowMessage（）{
var xhr=新的XMLHttpRequest
xhr.onload=（）=>myFunction（xhr.responseXML）
xhr.open（'GET'，getUrl（））
xhr.send（）
}
函数xml2obj（节点）{
常量obj={}
for（node.children的常量子节点）
obj[child.nodeName]=child.textContent
返回obj
}
函数saferHTML（模板数据）{
设tpl=templateData[0]；
for（设i=1；ia.name.localeCompare（b.name））
.map（装运=>saferHTML`
${shipping.name}
${shipping.shipmentId}
${shipping.destination}
${shipping.deliveredDate}
`)
.加入（“”）
document.getElementById（'result'）。innerHTML=`
名称
身份证件
目的地
传送
${装运}
`
}
loadDataAndShowMessage（）
//虚拟fn感知无处获取数据
函数getUrl（）{
返回URL.createObjectURL（新Blob（[`Charles46789056Indiannorth America05/06/201726/06/2017Aryan467896Delhigreece09/06/201730/06/2017Edward98767894PuneItaly25/06/201705/07/2017ASTER88950075ITALItalyCalifornia25/08/201706/09/2017Malika88950075JapanChina25/07/201729/07/07/07/2017Vikrant98765240NewYorkChennai03/07/201710]））
}
我首先将xml转换为json，然后使用数组排序方法，并使用localeCompare函数将其与进行比较，json格式还可以帮助更轻松地使用模板文本构建模板


//您不再需要ActiveXObject
函数loadDataAndShowMessage（）{
var xhr=新的XMLHttpRequest
xhr.onload=（）=>myFunction（xhr.responseXML）
xhr.open（'GET'，getUrl（））
xhr.send（）
}
函数xml2obj（节点）{
常量obj={}
for（node.children的常量子节点）
obj[child.nodeName]=child.textContent
返回obj
}
函数saferHTML（模板数据）{
设tpl=templateData[0]；
for（设i=1；ia.name.localeCompare（b.name））
.map（装运=>saferHTML`
${shipping.name}
${shipping.shipmentId}
${shipping.destination}
${shipping.deliveredDate}
`)
.加入（“”）
document.getElementById（'result'）。innerHTML=`
名称
身份证件
目的地
传送
${装运}
`
}
loadDataAndShowMessage（）
//虚拟fn感知无处获取数据
函数getUrl（）{
返回URL.createObjectURL（新Blob（[`Charles4678