はテーブルレコード

Question

を強調しながら、ページさわやかには、次のコードは 1.ハイライトテーブルレコード2機能を達成するために書かれたときにチェックボックスがクリックされたときに 2. リフレッシュしかし、このコードでページ本家同じ結果を保管してください同じクリックしたチェックボックスの結果残っていないどちらもテーブルレコードがハイライト表示されたり、リフレッシュ時にページの保持結果が同じになりません。 私は同じ質問を以前に投稿しましたが、localstorageに私が示唆している人もいます。私もそれを試しました。しかし、私の知識はとても貧しく、私は完全に与えられた説明を理解できませんでした。 あなたがコードの同じ部分を繰り返している：私は私の大学の割り当て

<style> 
 
    #cb3.highlight .label {background-color:yellow;} 
 
     #cb2.highlight .label {background-color:green;} 
 
     #cb1.highlight .label {background-color:red;} 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    Array.prototype.remove = function() { 
 
     var what, a = arguments, L = a.length, ax; 
 
     while (L && this.length) { 
 
      what = a[--L]; 
 
      while ((ax = this.indexOf(what)) !== -1) { 
 
       this.splice(ax, 1); 
 
      } 
 
     } 
 
     return this; 
 
    }; 
 
    
 
    var checked = []; 
 
    
 
    $(document).ready(function() { 
 
     if (localStorage.getItem("checked") == null) 
 
      localStorage.setItem("checked", checked); 
 
    
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("cb3.highlight .label "); 
 
       checked.push($(this).attr("cb3")); 
 
      } else { 
 
       $(this).parent().parent().removeClass("cb3.highlight .label "); 
 
       checked.remove($(this).attr("cb3")); 
 
      } 
 
      localStorage.setItem("checked", JSON.stringify(checked)); 
 
     }); 
 
    
 
     var saved = JSON.parse(localStorage.getItem("checked")); 
 
     for (var i = 0;i < saved.length; i++) { 
 
      var itemAtIndex = $("#" + saved[i] + ""); 
 
      itemAtIndex.click(); 
 
      itemAtIndex.parent().parent().addClass("cb3.highlight .label "); 
 
     } 
 
    }); 
 
    $(document).ready(function() { 
 
     if (localStorage.getItem("checked") == null) 
 
      localStorage.setItem("checked", checked); 
 
    
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("cb2.highlight .label "); 
 
       checked.push($(this).attr("cb2")); 
 
      } else { 
 
       $(this).parent().parent().removeClass("cb2.highlight .label "); 
 
       checked.remove($(this).attr("cb2")); 
 
      } 
 
      localStorage.setItem("checked", JSON.stringify(checked)); 
 
     }); 
 
    
 
     var saved = JSON.parse(localStorage.getItem("checked")); 
 
     for (var i = 0;i < saved.length; i++) { 
 
      var itemAtIndex = $("#" + saved[i] + ""); 
 
      itemAtIndex.click(); 
 
      itemAtIndex.parent().parent().addClass("cb2.highlight .label "); 
 
     } 
 
    }); 
 
    $(document).ready(function() { 
 
     if (localStorage.getItem("checked") == null) 
 
      localStorage.setItem("checked", checked); 
 
    
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("cb1.highlight .label "); 
 
       checked.push($(this).attr("cb1")); 
 
      } else { 
 
       $(this).parent().parent().removeClass("cb1.highlight .label "); 
 
       checked.remove($(this).attr("cb1")); 
 
      } 
 
      localStorage.setItem("checked", JSON.stringify(checked)); 
 
     }); 
 
    
 
     var saved = JSON.parse(localStorage.getItem("checked")); 
 
     for (var i = 0;i < saved.length; i++) { 
 
      var itemAtIndex = $("#" + saved[i] + ""); 
 
      itemAtIndex.click(); 
 
      itemAtIndex.parent().parent().addClass("cb1.highlight .label"); 
 
     } 
 
    }); 
 
    </script> 
 
    <div class="col-lg-10"> 
 
    
 
    <table id="Table" border="1"> 
 
      <tr id="cb1"> 
 
      <td><input type="checkbox" name="cb1" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr><tr id="cb2"> 
 
      <td><input type="checkbox" name="cb2" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr> 
 
     <tr id="cb3"> 
 
      <td><input type="checkbox" name="cb3" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr> 
 
     </table> 
 
    </div>

Answer 1

固定する必要があるいくつかのこととしてこれを提出しなければならないとヘルプは高く評価されるだろうあなたが3つのチェックボックスのためにそれをしていたなら、それは必要ではありません。 3つのチェックボックスをすべて選択し、クリックのためにイベントハンドラをアタッチするセレクタを使用しました。

あなたは「）addClass（」名前だけにに追加するクラスを与え、間違ったクラスを追加する方法

$(this).attr("cb3")、あなたが$(this).attr("name")を使用する場合は、間違っています。あなたのデータを保存する必要があるかもしれませんどのように多くのバイト

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<style> 
 
    #cb3.highlight.label {background-color:yellow;} 
 
     #cb2.highlight.label {background-color:green;} 
 
     #cb1.highlight.label {background-color:red;} 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    Array.prototype.remove = function() { 
 
     var what, a = arguments, L = a.length, ax; 
 
     while (L && this.length) { 
 
      what = a[--L]; 
 
      while ((ax = this.indexOf(what)) !== -1) { 
 
       this.splice(ax, 1); 
 
      } 
 
     } 
 
     return this; 
 
    }; 
 
    
 
    
 
    $(document).ready(function() { 
 
     var checked = []; 
 
    
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("highlight label"); 
 
       checked.push($(this).attr("name")); 
 
      } else { 
 
       $(this).parent().parent().removeClass("highlight label "); 
 
       checked.remove($(this).attr("name")); 
 
      } 
 
      localStorage.setItem("checked", JSON.stringify(checked)); 
 
     }); 
 

 
     if (localStorage.getItem("checked") !== null){ 
 
\t var saved = JSON.parse(localStorage.getItem("checked")); 
 
\t for (var i = 0;i < saved.length; i++) { 
 
\t  $("[name='" + saved[i] + "']").trigger('click'); 
 
\t } 
 
     } 
 
    
 
    }); 
 
    </script> 
 
    <div class="col-lg-10"> 
 
    
 
    <table id="Table" border="1"> 
 
      <tr id="cb1"> 
 
      <td><input type="checkbox" name="cb1" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr><tr id="cb2"> 
 
      <td><input type="checkbox" name="cb2" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr> 
 
     <tr id="cb3"> 
 
      <td><input type="checkbox" name="cb3" value="y" /></td> 
 
      <td class=label>Click me</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 

 

 
</script> 
 
</body> 
 
</html>