如何編輯使用PHP調用的表行的CSS部分？

Question

<script>
function gotoquiz(qcid){
window.location="<?php echo site_url();?>/quiz/attempt/"+qcid;
}
</script>
<style>
.tablesorter{
margin: 10px 0 10px 0 !important;
}

.tablesorter thead tr{
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    border-bottom: 1px solid#Ddd;
}

.tablesorter td {
    padding: 14px 10px;
    text-align: CENTER;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

.tablesorter thead tr{
text-align:center;
}

table tr.even {
    background: #f6f6f6 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)) !important;
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}

</style>
<div class="inner">
<div class="innergotoquiz(this.value)">
    <div id="content" class="testd">
    <div class="cu-title"><h2><?php if($title){ echo $title; } ?></h2></div>

<div class="result-top-head top-tab">
    <?php
    $logged_in=$this->session->userdata('logged_in');
    ?>
    <?php
    if($logged_in['su']=="1"){
    ?>
    <div class="but plus color6"><a href="<?php echo site_url('quiz/add_new');?>">Add new</a></div>
    <?php
    }
    ?>
    <div class="wite">
    <?php
    if($logged_in['su']=="1"){
    ?>

<form method="post" action="<?php echo site_url('quiz');?>">
    <div class="dropdown">
        <select name="search_type">
        <option value="quiz.quid">ID</option>
        <option value="quiz.quiz_name">Quiz Name</option>
        <option value="quiz.start_time">Start time</option>
        <option value="quiz.end_time">End time</option>
        <option value="quiz.duration">Duration</option>
        </select>
    </div>
        <input type="text" name="search" id="search" value="" placeholder="Type Search text here..."/> 
        <input type="submit" id="submit" value="Search"/>
</form>
</div>
    <?php
    }
    ?>
    <?php

    ?>
    <table class="tablesorter border-no-pd" cellspacing="0">
        <thead>
            <tr>

                <th>Quiz name</th>
                <th>Start time</th>
                <th>End time</th>
                <th>Duration</th>
                                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>

    <?php
    if($result==false){
    ?>

    <tr>
    <td colspan="5">
    No record foud!
    </td>
    </tr>
    <?php

    }else{
    foreach($result as $row){
    ?>

    <tbody>
        <tr >

            <td><?php echo $row->quiz_name;?></td>
            <td><?php echo date('Y/m/d',$row->start_time);?></td>
            <td><?php echo date('Y/m/d',$row->end_time);?></td>
            <td><?php echo $row->duration;?> Min. </td>
            <td>
            <?php
            if(in_array($row->quid,$incompletequiz)){
            echo "Incomplete";          
                    ?>
            <a href="<?php echo site_url('quiz/reset/0/'.$qciddd.'/'.$sbid.'/'.$row->quid);?>">Reset </a>
            <?php       
                }else   if(in_array($row->quid,$completedquiz)){
            echo "Completed";   
            ?>
                <a href="<?php echo site_url('quiz/reset/0/'.$qciddd.'/'.$sbid.'/'.$row->quid);?>">Reset </a>
            <?php       
            }else{
            echo "Unattempted"; 

            }           
            ?>      
            </td>
            <td>
            <?php 

?>
            <a href="<?php echo site_url('quiz/attempt/'.$row->quid.'/'.$sbid);?>">Attempt </a>
            &nbsp;&nbsp;
            <?php
            if($logged_in['su']=="1"){
            ?>
            <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='<?php echo site_url('quiz/remove_quiz/'.$row->quid );?>'; }"><?php echo '<i class="fa fa-trash-o"></i>';?></a> <a href="<?php echo site_url('quiz/edit_quiz/'.$row->quid );?>"><?php echo '<i class="fa fa-pencil"></i>';?></a>
            <?php
            }
            ?>
            </td>
        </tr>
    <?php
    }

    ?>


    </table>
        <?php
        }
    ?>

<?php 
$arrs = $row->quid;
if($arrs == 62)
{
?>
<div class="category_box1"  style='border: 1px solid #d4e0ed;'><table class="tablesorter border-no-pd left-txt" cellspacing="0"><tr><td>To purchase this package: 
    <a href='<?php echo site_url('user_data/buy_credits');?>'>Click Here</a></td></tr>
<tr></table></div>
<?php
}

?>


    <?php
    if($logged_in['su']=="1"){
    ?>

    <?php
    if(($limit-($this->config->item('number_of_rows')))>=0){ $back=$limit-($this->config->item('number_of_rows')); }else{ $back='0'; } ?>

    <div class="but back color5"><a href="<?php echo site_url('quiz/index/'.$back);?>"><i class="fa fa-chevron-left"></i>Back</a></div>
    &nbsp;&nbsp;
    <?php
     $next=$limit+($this->config->item('number_of_rows'));  ?>

    <div class="but next color4"><a href="<?php echo site_url('quiz/index/'.$next);?>">Next<i class="fa fa-chevron-right"></i></a></div>
    <?php
    }
    ?>
    </div>
</div>

我正在嘗試更改每個表行的背景以區別它。 我不知道這樣做，因為這些行是使用PHP調用的。 我還發布了該頁面的html部分（從inspect元素中收集），您可以將其作為參考。 那么任何人都可以幫助我嗎？

<table class="tablesorter border-no-pd" cellspacing="0">
    <thead>
        <tr>

            <th>Quiz name</th>
            <th>Start time</th>
            <th>End time</th>
            <th>Duration</th>
                            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>


<tbody>
    <tr>

        <td>Exam 1 (50 Questions)</td>
        <td>2015/08/17</td>
        <td>2015/11/17</td>
        <td>60 Min. </td>
        <td>
        Completed               <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/reset/0/2/4/61">Reset </a>

        </td>
        <td>
                    <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/attempt/61/4">Attempt </a>
        &nbsp;&nbsp;
                    <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='http://pmpsimulator.jmbokacademy.com/index.php/quiz/remove_quiz/61'; }"><i class="fa fa-trash-o"></i></a> <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/edit_quiz/61"><i class="fa fa-pencil"></i></a>
                    </td>
    </tr>

</tbody><tbody>
    <tr>

        <td>Exam 2 (50 Questions)</td>
        <td>2015/08/17</td>
        <td>2015/11/17</td>
        <td>60 Min. </td>
        <td>
        Completed               <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/reset/0/2/4/60">Reset </a>

        </td>
        <td>
                    <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/attempt/60/4">Attempt </a>
        &nbsp;&nbsp;
                    <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='http://pmpsimulator.jmbokacademy.com/index.php/quiz/remove_quiz/60'; }"><i class="fa fa-trash-o"></i></a> <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/edit_quiz/60"><i class="fa fa-pencil"></i></a>
                    </td>
    </tr>

</tbody><tbody>
    <tr>

        <td>Exam 3 (50 Questions)</td>
        <td>1970/01/01</td>
        <td>2015/11/17</td>
        <td>60 Min. </td>
        <td>
        Completed               <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/reset/0/2/4/59">Reset </a>

        </td>
        <td>
                    <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/attempt/59/4">Attempt </a>
        &nbsp;&nbsp;
                    <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='http://pmpsimulator.jmbokacademy.com/index.php/quiz/remove_quiz/59'; }"><i class="fa fa-trash-o"></i></a> <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/edit_quiz/59"><i class="fa fa-pencil"></i></a>
                    </td>
    </tr>

</tbody><tbody>
    <tr>

        <td>Exam 4 (50 Questions)</td>
        <td>2015/08/17</td>
        <td>2015/11/17</td>
        <td>60 Min. </td>
        <td>
        Completed               <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/reset/0/2/4/58">Reset </a>

        </td>
        <td>
                    <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/attempt/58/4">Attempt </a>
        &nbsp;&nbsp;
                    <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='http://pmpsimulator.jmbokacademy.com/index.php/quiz/remove_quiz/58'; }"><i class="fa fa-trash-o"></i></a> <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/edit_quiz/58"><i class="fa fa-pencil"></i></a>
                    </td>
    </tr>

</tbody><tbody>
    <tr>

        <td>PMP EXAM (200 Questions)</td>
        <td>2015/08/17</td>
        <td>2015/11/17</td>
        <td>240 Min. </td>
        <td>
        Completed               <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/reset/0/2/4/57">Reset </a>

        </td>
        <td>
                    <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/attempt/57/4">Attempt </a>
        &nbsp;&nbsp;
                    <a href="javascript: if(confirm('Do you really want to remove this quiz?')){ window.location='http://pmpsimulator.jmbokacademy.com/index.php/quiz/remove_quiz/57'; }"><i class="fa fa-trash-o"></i></a> <a href="http://pmpsimulator.jmbokacademy.com/index.php/quiz/edit_quiz/57"><i class="fa fa-pencil"></i></a>
                    </td>
    </tr>


</tbody></table>

Answer 1

您可以使用以下css規則為其他行着色。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

這是有關更多信息的鏈接： http : //www.w3.org/Style/Examples/007/evenodd.en.html