Javascript I'；我在创建动态表时遇到问题？

对于一个研究项目，我必须使用JavaScript创建一个动态表。我向一些朋友寻求帮助，但由于他们和我都不是计算机科学家（或者是这方面的任何人），我只知道使用AJAX和DOM是好的。并使用以下javascipt（src=w3schools和stack）

问题 它是排序，但不是字母或数字。它可能是表中一列中包含的图片的url，但对我来说它看起来是随机的

如何创建动态工作排序表

品牌
单击进行排序


IMG
型号点击排序


Os
单击进行排序


屏幕大小点击排序


价格点击排序


``` 
函数sortTable（）{
var表，行，切换，i，x，y，shouldSwitch；
table=document.getElementById（'phones'）；
切换=真；
当（切换）{
切换=错误；
行=表。行；
对于（i=1；i<（rows.length-1）；i++）{
shouldSwitch=false；
x=行[i].getElementsByTagName（“td”）[0]；
y=行[i+1].getElementsByTagName（“td”）[0]；
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））{
shouldSwitch=true；
打破
}
}
如果（应该切换）{
行[i].parentNode.insertBefore（行[i+1]，行[i]）；
切换=真；
}
}
}

getElementsByTagName（“TD”）[0]

意味着访问第一个

TD

元素，但并不总是需要第一个。相反，您需要添加一个

colNum

，用于在调用函数时定义的方括号中放入不同的数字。您还需要将数字排序与字母排序区别对待。当您将数字视为字符串时，它们的排序会有所不同，如下所示：

console.log（[“19”、“20”、“3”、“35”、“1”、“25”、“300”].sort（））

getElementsByTagName（“TD”）[0]

表示访问第一个

TD

元素，但并不总是需要第一个。相反，您需要添加一个

colNum

，用于在调用函数时定义的方括号中放入不同的数字。您还需要将数字排序与字母排序区别对待。当您将数字视为字符串时，它们的排序会有所不同，如下所示：

console.log（[“19”、“20”、“3”、“35”、“1”、“25”、“300”].sort（））
<table id="phones">
    <thead>
        <th><h2>Brand<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>IMG</h2></th>
        <th><h2>Model<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Os<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Screensize<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Price<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th> 
    </thead>  ``` 

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById('phones');
  switching = true;

  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
       }
    }
    if (shouldSwitch) {      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
          }
  }
}