Javascript：如何在点击行表上添加颜色并将刷新页面，颜色没有变化

Question

我想在单击行表时添加颜色。 刷新页面后，颜色永不更改，单击表格后仍会获得颜色。 颜色表示表格行已被单击。 单击行表将打开模式淡入淡出引导程序。

以及为什么当数据库中的数据由于大量资本缩水而导致在打开页面时感觉很沉？

JAVASCRIPT脚本：

    <script type="text/javascript">
    $(document).ready(function() {
    $("#tabel1, #tabel2").dataTable({
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
            "sPaginationType": "bootstrap",
            "order": [[0, "desc"]]
    });
    $(".clickable-row").each(function(i,tr){
        var bla = $(this).find('td:eq(3)').text();
          if(localStorage.getItem(bla)=='1') {
            $(this).addClass("visited");
          }
    });
    });
    </script>

表脚本：

<table id="tabel2">
      <thead>
          <tr>
              <th width="35%">Date</th>
              <th width="15%">Order</th>
              <th width="20%">Status</th>
              <th width="15%">INVOICE</th>
              <th width="15%">No. Table</th>                                            
          </tr>
      </thead>   
      <tbody>
            <tr class="clickable-row">
                <td class="center" data-toggle="modal" data-target="#myModal$invoice"><h4>$ymd</h4></td>
                <td class="center" data-toggle="modal" data-target="#myModal$invoice">$name</td>
                <td class="center" data-toggle="modal" data-target="#myModal$invoice">$status</td>
                <td>
                    <a class="label label-success invoice" data-toggle="modal" data-target="#myModal$invoice">$invoice</a>
                </td>
                <td class="center" data-toggle="modal" data-target="#myModal$invoice">No. $table</td>
            </tr>                                                  
      </tbody>
</table> 

模态脚本：

    <?php

        $sql5 = "SELECT invoice FROM order GROUP BY invoice";
        $see5 = mysql_query($sql5);                         
        while($select_result5 = mysql_fetch_array($see5))
        {
        $invoice    = $select_result5['invoice'] ;
echo"
    <div class='modal hide fade' id='myModal$invoice'>
        <div class='modal-header'>
            <button type='button' class='close' data-dismiss='modal'>×</button>
            <h3>Detail Order Invoice : $invoice</h3>
        </div>
        <div class='modal-body'>
        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
        <div class='embed-container'><iframe src='order.php?invoice=$invoice' style='border:0'></iframe></div>

        </div>
        <!-- div class='modal-footer'>
            <a href='#' class='btn' data-dismiss='modal'>Close</a>
            <a href='#' class='btn btn-primary'>Save changes</a>
        </div -->
    </div>"
    ;}
?>

Answer 1

我认为这有所帮助。 我使用的:target是当您在<a> href某些操作时，某些将成为目标，如果将其添加到表中，它将变为绿色，它应该可以工作

<div id="something"><a href="#something">click me</a></div>
<style>
  #something{
    width:100px;
    height:100px;
    background:black;
    color:white;
  }
  #something:target {
  background:green;
  }
</style>