Question

我有一个垂直时间轴，每个步骤都按数字顺序排列。在我的数据库中，我按照Id排序。所以我在左侧是数据库中的奇数Id元素，在我的时间轴右侧有数据库的偶数元素。通过在我的数据库上执行以下查询，我能够让元素显示在正确的一侧，具体取决于它们是偶数还是奇数ID：

var selectOddQueryString =“SELECT * FROM intern_firstweek WHERE（id％2）＆gt; 0”; var selectEvenQueryString =“SELECT * FROM intern_firstweek WHERE（id％2）= 0”;

但我不能让数字顺序保持不变。那么......它将会是1 3 5 2 4而不是1 2 3 4 5.我如何从数据库中提取元素并保持正确的数字顺序但是给奇数一个html / css样式甚至数字不同html / css风格。我觉得某种if语句可能有用，或者javascript或css解决方案可能有用。

以下代码：

  @{
        var db = Database.Open("HR_Portal_DB");
        var selectQueryString = "SELECT * FROM intern_firstweek ORDER BY Id";
        var selectOddQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) > 0";
        var selectEvenQueryString = "SELECT * FROM intern_firstweek WHERE (id % 2) = 0";
     }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <title>HR Intern First Week Timeline</title>

     <!--Bootstrap Style Imports..minified so they load faster-->
     <link rel="stylesheet" type=text/css media="screen" href="/Styles/Bootstrap/bootstrap-theme.min.css" />
     <link rel="stylesheet"type=text/css  media="screen" href="/Styles/Bootstrap/bootstrap.min.css" />

     <!--Google Font Import-->
    <link href="//fonts.googleapis.com/css?family=PT+Sans:400italic,400,700italic,700" rel="stylesheet" type="text/css" />

     <!--My Sylesheet Imports-->
    <link rel="stylesheet" type=text/css media="screen" href="/Styles/timeline.css">
 </head>
 <body>
     <div class="container">
        <div class="page-header">
            <h1 id="timeline">Intern- First Week Process</h1>
        </div>
        <ul class="timeline">

            @foreach(var row in db.Query(selectOddQueryString)){

                <li>

                <div class="timeline-badge primary">@row.Id</div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4 class="timeline-title">@row.Title</h4>
                    </div>
                    <div class="timeline-body">
                        <p>
                           @row.Description 
                        </p>
                        <br>
                        <a href=@row.Link1>Intern Orientation Packet</a>
                        <br>
                        <hr>
                    </div>
                </div>
            </li>
}
             @foreach(var row in db.Query(selectEvenQueryString)){
                  <li class="timeline-inverted">
                    <div class="timeline-badge success">@row.Id</div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">@row.Title
                        </h4>
                        </div>
                        <div class="timeline-body">
                            <p>
                                @row.Description
                            </p>
                            <br>
                            <a href=@row.Link1>Link 1 Here</a>
                            <br>
                        </div>
                    </div>
                </li>
}

        </ul>

    </div>
   <h1>HR Intern First Week Timeline</h1>
   <table>
       <thead>
           <tr>
               <th>Id</th>
               <th>Title</th>
               <th>Description</th>
               <th>Link</th>
           </tr>
       </thead>
       <tbody>
           @foreach(var row in db.Query(selectQueryString)){
            <tr>
                   <td>@row.Id</td>
                   <td>@row.Title</td>
                   <td>@row.Description</td>
                   <td>@row.Link1</td>
            </tr>
           }
       </tbody>
   </table>
 </body>
</html>

Answer 1

使用了jQuery奇数选择器，并且能够为偶数和奇数列表成员添加不同的样式，同时按照ID的顺序保持数据库中的查询。

将数据库ID分类为垂直时间轴

1 个答案: