Javascript 我很难按字母和数字排序_Javascript_Html_Tab Ordering

Javascript 我很难按字母和数字排序

javascript html

Javascript 我很难按字母和数字排序,javascript,html,tab-ordering,Javascript,Html,Tab Ordering,我在W3学校发现了一个非常有用的脚本，可以按升序或降序对表进行排序，问题是我可以使它只适用于其中一个我试图根据列中的值对“两者”进行排序 <!DOCTYPE html> <html> <head> <title>Sort a HTML Table Alphabetically</title> <style> table { border-spacing: 0; width: 100%; border: 1px

我在W3学校发现了一个非常有用的脚本，可以按升序或降序对表进行排序，问题是我可以使它只适用于其中一个

我试图根据列中的值对“两者”进行排序

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}
h1{
 color: green;
 }
th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
</head>
<body>

<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<h1>WORKS WITH LETTERS</h1>
<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Value</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>46</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>34</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>432</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>463</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>64</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc"; 
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;      
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

</body>
</html>


按字母顺序对HTML表排序
桌子{
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th{
光标：指针；
}
h1{
颜色：绿色；
}
th，td{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2
}
与信件打交道
与信件打交道
与信件打交道
名称
价值
伯格伦兹蛇
46
北/南
34
阿尔弗雷德·福特基斯特
32
科尼格利希·埃森
432
马加兹尼营养不良
5.
巴黎特色酒店
463
岛屿贸易
1.
笑巴克斯酒窖
64
函数可排序（n）{
变量表，行，切换，i，x，y，shouldSwitch，dir，switchcount=0；
table=document.getElementById（“myTable”）；
切换=真；
dir=“asc”；
while（切换）{
切换=错误；
行=表。行；
对于（i=1；i<（rows.length-1）；i++）{
shouldSwitch=false；
x=行[i].getElementsByTagName（“TD”）[n]；
y=行[i+1].getElementsByTagName（“TD”）[n]；
如果（目录==“asc”）{
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
if（x.innerHTML.toLowerCase（）


我可以修改它：
if (dir == "asc") {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      } else if (dir == "desc") {
        if (Number(x.innerHTML) < Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      }

if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }

if（dir==“asc”）{
if（Number（x.innerHTML）>Number（y.innerHTML））{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
if（Number（x.innerHTML）

对此：
if (dir == "asc") {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      } else if (dir == "desc") {
        if (Number(x.innerHTML) < Number(y.innerHTML)) {
                shouldSwitch = true;
                break;
        }
      }

if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }

if（dir==“asc”）{
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
if（x.innerHTML.toLowerCase（）

让它和数字一起工作，但我不能同时做这两件事。
我不确定是否必须创建一个新表，或者是否可以缩进它，但是在哪里？？
我对Java非常陌生，因为我主要使用python编写代码
谢谢你的帮助
您可以用一张支票代替您的支票，并且它是数字选项
而不是：
if（x.innerHTML.toLowerCase（）>y.innerHTML.toLowerCase（））{

您可以使用：
x=x.innerText.toLowerCase（）；
y=y.innerText.toLowerCase（）；
如果（x.localeCompare（y，'en'，{numeric:true}）>0）{


函数排序表（n）{
变量表，行，切换，i，x，y，shouldSwitch，dir，switchcount=0；
table=document.getElementById（“myTable”）；
切换=真；
dir=“asc”；
while（切换）{
切换=错误；
行=表。行；
对于（i=1；i<（rows.length-1）；i++）{
shouldSwitch=false；
x=行[i].getElementsByTagName（“TD”）[n]；
y=行[i+1].getElementsByTagName（“TD”）[n]；
如果（目录==“asc”）{
x=x.innerText.toLowerCase（）；
y=y.innerText.toLowerCase（）；
如果（x.localeCompare（y，'en'，{numeric:true}）>0）{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
x=x.innerText.toLowerCase（）；
y=y.innerText.toLowerCase（）；
if（x.localeCompare（y，'en'，{numeric:true}）<0）{
shouldSwitch=true；
打破
}
}
}
如果（应切换）{
行[i].parentNode.insertBefore（行[i+1]，行[i]）；
切换=真；
switchcount++；
}否则{
if（switchcount==0&&dir==asc）{
dir=“desc”；
切换=真；
}
}
}
}
表格{
边界间距：0；
宽度：100%；
边框：1px实心#ddd；
}
th{
光标：指针；
}
h1{
颜色：绿色；
}
th，
运输署{
文本对齐：左对齐；
填充：16px；
}
tr:n个孩子（偶数）{
背景色：#F2F2
}

与信件打交道
与信件打交道
与信件打交道
名称
价值
伯格伦兹蛇
46
北/南
34
阿尔弗雷德·福特基斯特
32
科尼格利希·埃森
432
马加兹尼营养不良
5.
巴黎特色酒店
463
岛屿贸易
1.
笑巴克斯酒窖
64
请查看localCompare，我想我符合您的要求
if（dir==“asc”）{
如果（（x.innerHTML.toLowerCase（）.localeCompare（y.innerHTML.toLowerCase（））>0）{
shouldSwitch=true；
打破
}
}否则，如果（dir==“desc”）{
if（（x.innerHTML.toLowerCase（）.localeCompare（y.innerHTML.toLowerCase（））<0）{
shouldSwitch=true；
打破
}
}
测试innerText
以查看它是否只包含数字（[0-9]
或\d
）。如果是，则按数字过程排序，否则，按字符串过程排序您的解决方案非常有效！谢谢，这正是我要找的！不用担心！如果这个答案对您有所帮助，请记住