Javascript 同一tr里多個td排序

javascript html

pbtoast 2018-03-12 12:19:44 ‧ 11415 瀏覽

分享至

html有一個table row裡面有多個table data，需要把td按字母順序排序
搜到網上有很多用js把多個tr之間的排序，但是沒有單個tr里多個td排序的

謝謝各路大神幫忙解答！！
假設一個簡單的：
b,a,d,c 在一行里，然后如何能把他们排序啊

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

暐翰

iT邦大師 1 級 ‧ 2018-03-12 12:54:37

最佳解答

問題:

b,a,d,c 在一行里，然后如何能把他们排序啊

回答:

先要懂以下概念
使用array的sort方法
然後拼接table字串
在輸出到DOM裡面

簡單範例:

<!DOCTYPE html>
<html>
<body>
    <p>回答:Javascript 同一tr里多個td排序</p><br>
    <button onclick="sort()">排序</button>
    <p id="demo"></p>
    <script>
        //初始化:未整理資料
        var arr = ["b", "a", "d", "c"];
        document.getElementById("demo").innerHTML = arr;

        /*
        以下整理邏輯
          原理:使用array的sort方法
          然後拼接table字串
          在輸出到DOM裡面
        */
        function sort() {
            arr.sort();
            var str_html = '<table border=1><tr>';
            for (i = 0; i < arr.length; i++) {
                str_html += "<td>" + arr[i] + "</td>";
            }
            str_html += '</tr></table>';

            document.getElementById("demo").innerHTML = str_html;
        }
    </script>
</body>
</html>

未排序跟排序過後的結果:

搞懂上面邏輯，接著可以進階寫一個泛用型script，抓取網頁所有table tr並排列裡面的td

<!DOCTYPE html>
<html>

<body>
  <p>回答:Javascript 同一tr里多個td排序</p>
  <hr>
  <button onclick="sort()">排序</button><br>
  <hr>
  <table border=1>
    <tr>
      <td>b</td>
      <td>a</td>
      <td>d</td>
      <td>c</td>
    </tr>
    <tr>
      <td>2</td>
      <td>3</td>
      <td>5</td>
      <td>1</td>
    </tr>
  </table>
  <hr>
  <table border=1>
    <tr>
      <td>g</td>
      <td>q</td>
      <td>z</td>
      <td>c</td>
    </tr>
    <tr>
      <td>22</td>
      <td>44</td>
      <td>552</td>
      <td>12</td>
    </tr>
  </table><br>
  <script>
    function sort() {
      //先挑出所有tr dom，並分組
      var trs = document.querySelectorAll("table tr");
      [].forEach.call(trs, function (tr) {
        //====排序====
        //抓取tr裡面的td dom
        var tds = tr.querySelectorAll("td");
        
        //這邊一定要另外用個字串集合盛裝，不然改值的時候，會有錯位修改DOM的情況
        var paraArr = [].slice.call(tds).sort(function (a, b) {
          return a.textContent > b.textContent ? 1 : -1;
        });
        
        //把td裡面的值抓出來得出一個字串集合
        var str_arrs = [];
        [].forEach.call(paraArr, function (td) {
          str_arrs.push(td.innerHTML);
        });

        //====把排序結果顯示到table裡面====
        var index = 0;
        [].forEach.call(tds, function (td) {
          td.innerHTML = str_arrs[index++];
        });
      });
    }
  </script>
</body>

</html>

得出的結果