html - How to edit the css part of table-rows which are called using PHP? -
<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 $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> <?php if($logged_in['su']=="1"){ ?> <a href="javascript: if(confirm('do want remove 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 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 color5"><a href="<?php echo site_url('quiz/index/'.$back);?>"><i class="fa fa-chevron-left"></i>back</a></div> <?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> i trying change each table rows background differentiate it. don't know because of rows called using php. have posted html part of page(collected inspect element), can have reference. body can me please??
<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> <a href="javascript: if(confirm('do want remove 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> <a href="javascript: if(confirm('do want remove 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> <a href="javascript: if(confirm('do want remove 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> <a href="javascript: if(confirm('do want remove 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> <a href="javascript: if(confirm('do want remove 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>
you can color every other row css rules such below.
tr:nth-child(even) {background: #ccc} tr:nth-child(odd) {background: #fff} here link more information on it: http://www.w3.org/style/examples/007/evenodd.en.html
Comments
Post a Comment