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添加类应该可以解决您的问题。

Answer 2

您可以使用 tablesorter 插件的小部件为行着色。并且已经存在默认小部件 zebra ，它将类odd和even应用于行。

$("#bin").tablesorter({ 
    widgets: ['zebra'] 
});

更多plugin documentation。

对来自数据库的foreach插入到表中的行进行排序

2 个答案: