时间戳

首页 > 解决方案 > 为什么我的表格不按数字顺序对我的 div 变量进行排序？

javascript - 为什么我的表格不按数字顺序对我的 div 变量进行排序？

问题描述

玩游戏时，我提出的代码将

  1. 在游戏结束后确定您的最终得分，即 Gamer Over 部分
  2. 这个最终分数被转移并显示在一张桌子上
  3. 按下“排序”按钮/文本时，表格将按数字顺序重新排列

目前，<div id="total-score">0</div>用于显示玩家的最终得分，并且可以通过窗口顶部的子页面轻松导航。只要用户不重置他们的分数，这个最终分数就会保持可见，但是，在对表格进行排序时，它仍然保持在其初始位置，而其他单元格将正确地重新排列自己。

你们中的任何人都可以提供有关如何解决此问题的建议吗？

<html>

<head>
  <style>
    table {
      border-collapse: collapse;
    }
    
    th,
    td {
      border: 1px solid #aaa;
      padding: 5px;
      text-align: left;
    }
    
    * {
      box-sizing: border-box
    }
    /* Set height of body and the document to 100% */
    
    body,
    html {
      height: 100%;
      margin: 0;
      font-family: adventure;
    }
    /* Style tab links */
    
    .tablink {
      background-color: #111;
      color: Yellow;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      font-size: 17px;
      width: 25%;
    }
    
    .tablink:hover {
      background-color: #999;
    }
    /* Style the tab content (and add height:100% for full page content) */
    
    .tabcontent {
      color: black;
      display: none;
      padding: 100px 20px;
      height: 100%;
    }
    
    p5 {
      width: 20%;
      height: 10%;
      position: absolute;
      top: 800px;
      right: 300px;
      font-family: Arial;
      text-align: center;
      font-size: 30px;
      color: white;
      border: none;
      outline: none;
    }
    
    #Home {
      background-color: red;
    }
    
    #Game { background-color: green;}
    
    #Contact {
      background-color: blue;
    }
    
    #About {
      background-color: Yellow;
    }
    
    body {
      background-image: url('help.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    
    input {
      top: 400px;
      right: 330px;
      width: 18%;
      height: 6%;
      position: absolute;
    }
    
    button {
      width: 10%;
      height: 6%;
      position: absolute;
      font-family: Arial;
      top: 400px;
      right: 120px;
      text-align: center;
      font-size: 25px;
      color: white;
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 5px;
      background-color: #000208;
    }
    
    button:hover {
      transition: 0.05s;
      background-color: #0B4870;
      transform: rotateZ(-5deg);
      box-shadow: 0 0 30px -10px #0B4870;
    }
    
    button:active {
      transform: translateY(20px);
      transform: rotateZ(5deg);
    }
    
    button2 {
      width: 5%;
      height: 6%;
      position: absolute;
      font-family: Arial;
      top: 400px;
      right: 300px;
      text-align: center;
      font-size: 40px;
      color: white;
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 5px;
      background-color: #000208;
    }
    
    button:hover {
      transition: 0.05s;
      background-color: #0B4870;
      transform: rotateZ(-5deg);
      box-shadow: 0 0 30px -10px #0B4870;
    }
    
    button:active {
      transform: translateY(20px);
      transform: rotateZ(5deg);
    }
    
    p1 {
      width: 30%;
      height: 10%;
      position: absolute;
      top: 300px;
      right: 110px;
      font-family: Arial;
      text-align: center;
      font-size: 60px;
      color: white;
      border: none;
      outline: none;
      border-radius: 5px;
      background-color: #000208;
    }
    
    p {
      width: 20%;
      height: 10%;
      position: absolute;
      top: 450px;
      right: 300px;
      font-family: Arial;
      text-align: center;
      font-size: 30px;
      color: white;
      border: none;
      outline: none;
    }
  </style>
</head>

<body>
  <button4 class="tablink" onclick="openPage('Home', this, 'red')" style="">Home</button4>
  <button4 class="tablink" onclick="openPage('Game', this, 'green')" id="defaultOpen" style="background-color: green;">Game</button4>
  <button4 class="tablink" onclick="openPage('Contact', this, 'blue')" style="">Contact</button4>
  <button4 class="tablink" onclick="openPage('About', this, 'yellow')" style="">About</button4>

  <div id="Home" class="tabcontent" style="display: none;">
    <h1>Home</h1>
 

    <p>Click the button to sort the table numerically:</p>
    <p2><button onclick="sortTable()">Sort</button></p2>

    <table id="myTable">
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>
          <p6>
            <div id="total-score">0</div>
          </p6>
        </td>
        <td>Berglunds snabbkop</td>
      </tr>
      <tr>
        <td>3</td>
        <td>North/South</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Alfreds Futterkiste</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Koniglich Essen</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Magazzini Alimentari Riuniti</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Paris specialites</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Island Trading</td>
      </tr>

    </table>

    <script>
      function sortTable() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("myTable");
        switching = true;
        /*Make a loop that will continue until
        no switching has been done:*/
        while (switching) {
          //start by saying: no switching is done:
          switching = false;
          rows = table.rows;
          /*Loop through all table rows (except the
          first, which contains table headers):*/
          for (i = 1; i < (rows.length - 1); i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            x = rows[i].getElementsByTagName("TD")[0];
            y = rows[i + 1].getElementsByTagName("TD")[0];
            //check if the two rows should switch place:
            if (Number(x.innerHTML) > Number(y.innerHTML)) {
              //if so, mark as a switch and break the loop:
              shouldSwitch = true;
              break;
            }
          }
          if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
          }
        }
      }
    </script>

  </div>

  <div id="Contact" class="tabcontent" style="display: none;">
    <h1>Contact</h1>
    <p>Get in touch, or swing by for a cup of coffee.</p>
  </div>

  <div id="About" class="tabcontent" style="display: none;">
    <h1>About</h1>
    <p>Who we are and what we do.</p>
  </div>

  <div id="Game" class="tabcontent" style="display: block;">
    <div id="Game" class="tabcontent" style="display: none;">
      <h1>Game</h1>
      <p>Some Game this fine day!</p>
    </div>

    <canvas id="myCanvas" width="800" height="500" style="border:80px solid #ffffff;"></canvas>

    <p style="width: 300px; vertical-align:top"></p>
    <p1 id="message001">What is <text id="name001">6-8</text>?</p1>

    <div id="disappear001"><input type="text" id="input001" autofocus=""></div>
    <div id="disappear002"><button onclick="submit001()">Submit</button></div>

    <p id="answer001"></p>
    <p3 id="button001"></p3>
    <p3 id="button002"></p3>




    <script type="text/javascript">
      function openPage(pageName, elmnt, color) {
        var i, tabcontent, tablinks;

        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].style.backgroundColor = "";
        }

        document.getElementById(pageName).style.display = "block";
        elmnt.style.backgroundColor = color;
      }
      // Get the element with id="defaultOpen" and click on it
      document.getElementById("defaultOpen").click();

      var question001 = ["6-8", "10/2", "3+7", "5-3", "6+5", "7-4"];
      var answer001 = ["-2", "5", "10", "2", "11", "3"];
      var random001 = Math.floor(Math.random() * question001.length);

      function submit001() {
        var b = input001.value;

        if (random001 == 0 && b == answer001[0]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 1 && b == answer001[1]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 2 && b == answer001[2]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 3 && b == answer001[3]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 4 && b == answer001[4]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 5 && b == answer001[5]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";
        } else if (random001 == 6 && b == answer001[6]) {
          document.getElementById("answer001").innerHTML = "Correct..";
          document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
          document.getElementById("disappear002").innerHTML = "";

        } else {
          document.getElementById("answer001").innerHTML = "Game Over";
          document.getElementById("button002").innerHTML = "<button onclick=window.location.reload()>Reset</button>";
          document.getElementById("disappear002").innerHTML = "";
          gameOver();
        }
      }

      document.getElementById("name001").innerHTML = question001[random001];

      function btn001() {
        random001 = Math.floor(Math.random() * question001.length);
        document.getElementById("name001").innerHTML = question001[random001];
        document.getElementById("button001").innerHTML = "";
        document.getElementById("disappear001").innerHTML = "<input type=text id=input001 autofocus>";
        document.getElementById("disappear002").innerHTML = "<button onclick=submit001()>Submit</button>";
        document.getElementById("answer001").innerHTML = "";
      }

      function question() {
        return document.getElementById("message001").textContent;
      }

      let canvas = document.getElementById("myCanvas");
      let context = canvas.getContext("2d");
      context.font = '30px arial';
      let scrollCounter, cameraY, current, mode;
      let total_score = document.querySelector('#total-score');
      let ySpeed = 5;
      let height = 50;
      let boxes = [];

      boxes[0] = {
        x: 300,
        y: 200,
        width: 200
      };
      let debris = {
        x: 300,
        width: 0
      };

      function newBox() {
        boxes[current] = {
          x: 300,
          y: (current + 10) * height,
          width: boxes[current - 1].width
        };
      }

      function gameOver() {
        mode = 'gameOver';
        context.fillText('Your tower collapsed! Wanna play again?', 200, 40);
        total_score.innerHTML = parseInt(total_score.innerHTML) + current - 1;
      }

      function animate() {
        if (mode != 'gameOver') {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillText('Score: ' + (current - 1).toString(), 20, 40);
          for (let n = 0; n < boxes.length; n++) {
            let box = boxes[n];
            context.fillStyle = 'rgb(' + n * 14 + ',' + n * 23 + ',' + n * 25 + ')';
            context.fillRect(box.x, 600 - box.y + cameraY, box.width, height);

          }
          context.fillStyle = 'white';
          context.fillText(question(), 310, 440);
          context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height);
          if (mode == 'bounce') {
            boxes[current].x = boxes[current].x + xSpeed;
            if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width)
              xSpeed = -xSpeed;
            if (xSpeed < 0 && boxes[current].x < 0)
              xSpeed = -xSpeed;
          }
          if (mode == 'fall') {
            boxes[current].y = boxes[current].y - ySpeed;
            if (boxes[current].y == boxes[current - 1].y + height) {
              mode = 'bounce';
              let difference = boxes[current].x - boxes[current - 1].x;
              if (Math.abs(difference) >= boxes[current].width) {
                gameOver();
              }
              debris = {
                y: boxes[current].y,
                width: difference
              };
              if (boxes[current].x > boxes[current - 1].x) {
                boxes[current].width = boxes[current].width - difference;
                debris.x = boxes[current].x + boxes[current].width;
              } else {
                debris.x = boxes[current].x - difference;
                boxes[current].width = boxes[current].width + difference;
                boxes[current].x = boxes[current - 1].x;
              }

              current++;
              scrollCounter = height;
              newBox();
            }
          }
          debris.y = debris.y - ySpeed;
          if (scrollCounter) {
            cameraY++;
            scrollCounter--;
          }
        }
        window.requestAnimationFrame(animate);
      }

      function restart() {
        boxes.splice(1, boxes.length - 1);
        mode = 'bounce';
        cameraY = 0;
        scrollCounter = 0;
        xSpeed = 0;
        current = 1;
        newBox();
        debris.y = 0;
      }

      document.getElementById("disappear002").onclick = function() {
        if (mode == 'gameOver')
          restart();
        else {
          if (mode == 'bounce')
            mode = 'fall';
        }
      };

      restart();
      animate();
    </script>

  </div>
  <div class="as-console-wrapper">
    <div class="as-console"></div>
  </div>

</body>

</html>

标签： javascripthtmlcss

解决方案

Number(x.innerHTML)当您进入时，您的第一行将失败sortTable()，并将导致 NaN。

<td>
      <p6>
        <div id="total-score">0</div>
      </p6>
    </td>

修改为

 <td id="total-score"> 0
        </td>

推荐阅读