పట్టికను ఎలా క్రమీకరించాలి

సంక్షిప్త ఫంక్షన్ సృష్టించండి

ఉదాహరణ

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  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];
      // రెండు పంక్తులు స్థానాలను మార్చాలి అని తనిఖీ చేయండి:
      else if (dir == "desc") {
        // మార్పు చేయాలి అని అనిపించినప్పుడు మార్పు చేయబడినది అనుకున్నారు మరియు ప్రస్తుత సైకిల్ నుండి బయటపడం
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* మార్పును అవసరమని గుర్తుంచినప్పుడు, మార్పును చేపట్టి అవసరమని గుర్తుంచబడినది అని గుర్తుంచండి: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

亲自试一试

పట్టిక ముఖం పై క్లిక్ చేయడం ద్వారా పట్టికను క్రమబద్ధం చేయండి

“పేరు” ను క్లిక్ చేస్తే పేరు ప్రకారం క్రమబద్ధం అవుతుంది, “దేశం” ను క్లిక్ చేస్తే దేశం ప్రకారం క్రమబద్ధం అవుతుంది.

మొదటి క్లిక్ చేసినప్పుడు, క్రమబద్ధత దిశ పెరిగేటట్లు ఉంటుంది (ఎ నుండి జి వరకు).

మళ్ళీ క్లిక్ చేసినప్పుడు, క్రమబద్ధత దిశ పరిమితికి వెళుతుంది (జి నుండి ఎ వరకు):

ఉదాహరణ

<table id="myTable2">
<tr>
<!--当表头被点击时，运行 sortTable 函数，并传递一个参数，0 表示按姓名排序，1 表示按国家排序：-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
...
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable2");
  switching = true;
  // క్రమంగత దిశను పెరగడం గా మార్చండి:
  dir = "asc";
  /* మార్పులు అవసరమని ఉన్న పంక్తులు లేకపోతే వరకు చోటు అయ్యే వరకు పునరావృతం చేయండి: */
  while (switching) {
    // మొదటగా ప్రకటించండి: ప్రస్తుతం మార్పులు అవసరమని ఉన్న పంక్తులు లేవు:
    switching = false;
    rows = table.rows;
    /* పట్టికలోని అన్ని పంక్తులను పరిశీలించండి (తలపంక్తిని మినహా, ఎందుకంటే అది పట్టిక శీర్షికను కలిగి ఉంటుంది): */
    for (i = 1; i < (rows.length - 1); i++) {
      // మొదటగా ప్రకటించండి: ప్రస్తుత పంక్తి మరియు తదుపరి పంక్తి స్థానాలను మార్చకూడదు:
      shouldSwitch = false;
      /* పోలించడానికి కావలసిన రెండు మూలకాలను పొందండి, ఒకటి ప్రస్తుత పంక్తి నుండి, మరొకటి తదుపరి పంక్తి నుండి: */
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* ఈ రెండు పంక్తులు స్థానాలను మార్చాలి అని పరిశీలించండి, క్రమంగత దిశ ఆధారంగా పెరగడం లేదా తగ్గడం: */
      if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        else if (dir == "desc") {
          // మార్పు జరగాలి అయితే, మార్పును అవసరమని గుర్తుంచి ప్రస్తుత చోటు నుండి బయటపడండి:
          shouldSwitch = true;
          break;
        }
      }
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // మార్పు జరగాలి అయితే, మార్పును అవసరమని గుర్తుంచి ప్రస్తుత చోటు నుండి బయటపడండి:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* మార్పును అవసరమని గుర్తుంచినప్పుడు, మార్పును చేపట్టి అవసరమని గుర్తుంచబడినది అని గుర్తుంచండి: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // ప్రతి మార్పునకు ఈ కౌంటర్ పెంచబడుతుంది:
      switchcount ++;
    }
      /* మార్పులు జరగలేదు మరియు క్రమంగత దిశ అని "పెరగడం" అయితే, క్రమంగత దిశను "తగ్గడం" గా మార్చి మరలా while చోటు అయ్యే వరకు పునరావృతం చేయండి. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

亲自试一试

పట్టికను సంఖ్యాక్రమంలో క్రమీకరించండి

ఉదాహరణ

if (Number(x.innerHTML) > Number(y.innerHTML)) {
  shouldSwitch = true;
  break;
}

亲自试一试