如何更改动态创建的 table 中的行顺序？

Question

如果我有一个动态创建的 table，看起来像这样：

<table id="myTable">
  <tr>
    <th>Day</th>
    <th>Hours</th>
  </tr>
  <tr>
    <td>Weds</td>
    <td>7</td>
  </tr>   
  <tr>
    <td>Fri</td>
    <td>7.5</td>
  </tr> 
  <tr>
    <td>Mon</td>
    <td>8</td>
  </tr>       
</table>

周一至周五如何排序？最好使用 jQuery.

Answer 1

这使用工作日哈希将三个字母的日期缩写转换为数字。这些行从 table 中删除、排序并插回：

var weekHash = {'Sun':0,'Mon':1,'Tue':2,'Wed':3,'Thu':4,'Fri':5,'Sat':6};
var header = $('tr:first');
var days = $('tr').not(header);
var orderedDays = [];
for (var i = 0; i < 7; i++)
{
    days.each(function(){
        if (i == weekHash[$(this).find('td:first').html()])
        {
            orderedDays.push(this);
        }
    });
}
$('tr').not(header).remove;
for (o in orderedDays)
{
    $('table').append(orderedDays[o]);    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
      <tr>
        <th>Day</th><th>Hours</th>
      </tr>
      <tr>
        <td>Wed</td><td>7</td>
      </tr>   
      <tr>
        <td>Fri</td><td>7.5</td>
      </tr> 
      <tr>
        <td>Mon</td><td>8</td>
      </tr>       
    </table>

不过，您可能需要更改工作日缩写，因为我注意到您的 table 说的是 'Weds' 而不是我的 'Wed'.

如何更改动态创建的 table 中的行顺序？

How to change the order of rows in a dynamically created table?

jquery

row

html-table