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

Question

I want add a color on click a row table. and after refresh the page the color never change still get the color after click table. Color indicates that the table row has been clicked. On click row table will open the modal fade bootstrap.

And why when the data from the database is due to a lot of capital fade, the page feels heavy when in the open?

JAVASCRIPT SCRIPT :

    <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 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> 

MODAL FADE SCRIPT :

    <?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

I think this met help. I used :target is when you href something in <a> something will be the target and it will turn green if you add this to your table it should work

<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>