javascript - 对通过 foreach 从数据库插入到表中的行进行排序

Question

我有一个表，它的内容是从数据库中获取的。该表有一个带有标准表标题行的行，然后有一个 foreach() ，它从包含中获取信息并将其吐出到表主体中。 (插入一个新的每个条目。)

我需要表格最初按关闭日期列排序，而不是符号列。我正在使用Tablesorter插件，我尝试这样做:

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("#bin").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[6,1],[0,0]] 
    }); 
}); 

这可行，但问题是我有一个背景应用于 foreach 中的每隔一行，并且当表排序器在页面加载时对行进行排序时，背景颜色不是每隔一个，而是在零星的地方从表排序器移动这些行。

这是我的代码:

    <table cellspacing="0" cellpadding="0" id="bin" width="100%">
        <thead>
            <tr>
                <th style="text-align:left; padding-top: 20px;" width="10%">Symbol <img src="/images/sort-arrow.jpg" alt="Sort by Symbol" class="sort-right move-left bottom-image"/></th>
                <th style="text-align:left;" width="20%">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow.jpg" alt="Sort by Company Name" class="sort-right move-left"/></th>
                <th style="text-align:left; padding-top: 20px;" width="23%">Industry <img src="/images/sort-arrow.jpg" alt="Sort by Industry" class="sort-right move-left bottom-image"/></th>
                <th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Date <img src="/images/sort-arrow.jpg" alt="Sort by Buy Date"/></th>
                <th style="text-align:center;" width="10%"><span class="center-text">Buy</span><br>Price &nbsp;<img src="/images/sort-arrow.jpg" alt="Sort by Buy Price"/></th>
                <th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Price &nbsp;<img src="/images/sort-arrow.jpg" alt="Sort by Closed Price"/></th>
                <th style="text-align:center;" width="10%"><span class="center-text">Closed</span><br>Date &nbsp;<img src="/images/sort-arrow.jpg" alt="Sort by Closed Date"/></th>
                <th style="text-align:center;" width="10%"><span class="center-text">Total</span><br>Return &nbsp;<img src="/images/sort-arrow.jpg" alt="Sort by Current Return"/></th>
            </tr>
        </thead>
        <tbody>
<?php
    foreach($buylist as $a) {
        $bg = ($c % 2) ? ' class="even"' : '';
        //$direction = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? 'up_green' : 'down_red';
        //$tick = (is_numeric($a['creturn']) && $a['creturn'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';
        //$tick2 = (is_numeric($a['cchange']) && $a['cchange'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">'; 
        //$tick3 = (is_numeric($a['final_return_pct']) && $a['final_return_pct'] >= 0) ? '<img src="/images/icon_up.png">' : '<img src="/images/icon_down.png">';   
        $type = '';
        $entry_price = (is_numeric($a['buyprice'])) ? '$'.$a['buyprice'] : '&ndash;';
        $sold_price = (is_numeric($a['sold_price'])) ? '$'.$a['sold_price'] : '&ndash;';
        $total_return= sprintf("%.02f", (($a['sold_price'] - $a['buyprice'])/$a['buyprice']) * 100);
?>
            <tr<?=$bg;?>>
                <td ><b><a href="/gamechangers/getaquote/?symbolsearch=<?php echo $a['symbol']; ?>"><?=$a['symbol'];?></a></b><?=$type;?></td>
                <td><?=$a['name'];?></td>
                <td valign="top"><?=$a['industry'];?></td>
                <td align="center"><?=$a['buydate'];?></td>
                <td align="center"><?=$entry_price;?></td>
                <td align="center"><?php echo $sold_price; ?></td>
                <td align="center"><?=$a['sold_date'];?></td>
                <td align="center"><?php echo $total_return; ?>%</td>
            </tr>
<?php
        $c++;
    }
?>
        </tbody>
    </table>

表格的 CSS:

table#bin, table#fallen, table#growth, table#turn { margin:10px 0; border:1px solid #ccc; }
th, td { padding:10px 7px; }
tr th { background:#ededed; color:#545454; font-weight:bold; cursor:pointer;}
#bin tr.even td { background:#e1eff1; }
#turn tr.even td { background:#f7f2d8; }
#fallen tr.even td { background:#f2dcbd; }
#growth tr.even td { background:#deefdc; }
td.title a { text-decoration:none; display:block; text-transform:uppercase; font-weight:bold;}
#bin td.title { background:#5198a0; }
#fallen td.title { background:#e6a850; }
#turn td.title { background:#ebd870; }
#growth td.title { background:#6ab065; }
#bin td.title a { color:#182c2e; font-size:13px;}
#fallen td.title a { color:#352713;  font-size:13px;}
#turn td.title a { color:#37321a;  font-size:13px; }
#growth td.title a { color:#233d21;  font-size:13px;}
hr { border:2px dotted #ccc; border-bottom:none; }
#tooltip { position:absolute; z-index:3000; border:1px solid #111; background-color:#eee; padding:5px; }
#tooltip h3, #tooltip div, #tooltip p { margin:0; }
.right_para_inside {
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding-bottom: 7px;
    padding-top: 7px;
    margin-bottom: 5px;
}
.right_para {
    font-size: 16px;
    color: #999;
}
.right_para .right_para_inside a:hover {
    color: #000;
    text-decoration: none;
}

所以我的问题是，如何让 PHP 按关闭日期自动对表进行排序？

想要添加另一个细节。用户可以通过单击标题列来重新排列表格(这就是表格排序器插件的用途。)

当我使用 sortList 函数时，它确实按预期的截止日期对表格进行排序，但表格的颜色(奇数、偶数、奇数)却完全困惑了。

Answer 1

不要通过 PHP 添加行类，而是使用 CSS:

tr:nth-of-type(even) {
  background-color:#ccc;
}

使用 CSS 而不是通过 PHP 添加类应该可以解决您的问题。