排序表Jquery的问题_Jquery_Jquery Mobile_Jquery Plugins_Tablesorter

排序表Jquery的问题

jquery jquery-mobile jquery-plugins

排序表Jquery的问题,jquery,jquery-mobile,jquery-plugins,tablesorter,Jquery,Jquery Mobile,Jquery Plugins,Tablesorter,我有一个表，并使用tablesort插件，该表对表中已有的数据进行排序，但不会对我添加的任何新数据进行排序。迫切需要解决这个问题。只要我能对所有数据进行正确排序，任何不同的方法，甚至是一个完全不同的表都会很好 !DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title>

我有一个表，并使用tablesort插件，该表对表中已有的数据进行排序，但不会对我添加的任何新数据进行排序。迫切需要解决这个问题。只要我能对所有数据进行正确排序，任何不同的方法，甚至是一个完全不同的表都会很好

 !DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

           <meta name="viewport" content="width=device-width"/>
 <link rel="stylesheet" href="themes/theme1.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8">



    <link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />


    <script src="jqm/demos/js/jquery.js">
    </script>

<script type="text/javascript" src="__jquery.tablesorter/jquery.tablesorter.js"></script> 

    <script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
    </script>


        <script>


            $(document).ready(function () {
                $('#btn1').on('click', AddScore);
                $("#myTable").tablesorter();



            });

            function AddScore() {
                var jqTableBody = $('#myTable tbody');
                var sTRTemplate = '<tr>' +

                                  '    <td>{Id}</td>' +
                                  '    <td>{Course}</td>' +
                                  '    <td>{Target}</td>' +
                                  '    <td>{Points}</td>' +
                                  '</tr>';

                var sTRAppend = sTRTemplate;

                $('div[data-role="fieldcontain"] input:text').each(function () {
                    switch (this.id) {

                        case 'ScoreID': sTRAppend = sTRAppend.replace('{Id}', this.value); break;
                        case 'ScoreCourse': sTRAppend = sTRAppend.replace('{Course}', this.value); break;
                        case 'ScoreTarget': sTRAppend = sTRAppend.replace('{Target}', this.value); break;
                        case 'ScorePoints': sTRAppend = sTRAppend.replace('{Points}', this.value); break;
                    }
                })
                jqTableBody.append(sTRAppend);
            }


        </script>
    </head>
    <body>

    <div data-role="collapsible" data-collapsed="true">
         <h1>Current Top 10</h1>


<div data-role="fieldcontain">
    <label for="ScoreID">Column 1:</label>
    <input type="text" name="ScoreID" id="ScoreID" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreCourse">Column 2:</label>
    <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="ScoreTarget">Column 3:</label>
    <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScorePoints">Column 4:</label>
    <input type="text" name="ScorePoints" id="ScorePoints" value=""  />
</div>  
        <button id="btn1">Add</button>



    <table data-role="table" id="myTable" class="tablesorter" data-mode="columntoggle" border="1" class="ui-responsive table-stroke">
      <thead>
        <tr>

       <th>Student ID</th>
          <th data-priority="3">Course</th>
          <th data-priority="1">Target</th>
          <th data-priority="5">Score (pts)</th>
      </thead>

      <tbody>
        <tr>

          <td>Bg10xb</td>
          <td>golf</td>
          <td>101</td>
          <td>229</td>
        </tr>
        <tr>

          <td>Bg12we</td>
          <td>tennis</td>
          <td>200</td>
          <td>201</td>
        </tr>
        <tr>

          <td>Bg56gf</td>
          <td>football</td>
          <td>91</td>
          <td>194</td>
        </tr>
        <tr>
       </tbody>
    </table>

  </div>
</div>

！DOCTYPE html>
$（文档）.ready（函数（）{
$（'btn1'）。在（'click'，AddScore'）；
$（“#myTable”）.tablesorter（）；
});
函数AddScore（）{
var jqTableBody=$（“#myTable tbody”）；
变量sTRTemplate=''+
“{Id}”+
“{Course}”+
“{Target}”+
“{Points}”+
'';
var StrapEnd=sTRTemplate；
$（'div[data role=“fieldcontain”]input:text'）。每个（函数（）{
开关（this.id）{
案例'ScoreID'：StrapEnd=StrapEnd.replace（'{Id}'，this.value）；break；
案例“ScoreCourse”：StrapEnd=StrapEnd.replace（“{Course}”，this.value）；break；
案例'ScoreTarget'：StrapEnd=StrapEnd.replace（'{Target}'，this.value）；break；
案例“ScorePoints”：StrapEnd=StrapEnd.replace（“{Points}”，this.value）；break；
}
})
jqTableBody.append（结束）；
}
当前前十名
第1栏：
第2栏：
第3栏：
第4栏：
添加
学生证
课程
目标
分数（pts）
Bg10xb
高尔夫球运动
101
229
Bg12we
网球
200
201
Bg56gf
足球运动
91
194

追加新行后，确保触发表上的更新，以便tablesorter知道如何刷新其缓存数据

jqTableBody.append(sTRAppend);
// add the code below
$("#myTable").trigger('update');

此外，上述代码还存在一些问题：

关闭前缺少
，
关闭前的额外

这可能看起来没什么大不了的，但试着在IE中使用HTML…

我不知道这个插件是如何工作的。要么将所有数据保存在一个数组中，对其排序，清空表，然后将所有数据放回原处。或者照@Mottie说的做：-）