1. ホーム
  2. 質問と答え
  3. JavaScriptを使ってページを更新した後、ボタンをクリックしたことを思い出す方法は？

JavaScriptを使ってページを更新した後、ボタンをクリックしたことを思い出す方法は？

2017-07-26 8 views
0

チェックボックスをクリックしたときにテーブルレコードを強調表示するためのコードです。しかし、ページをリフレッシュすると、ハイライトされたレコードは消えます。ページをリフレッシュしても、同じハイライトされたレコードを残すことはできますか？JavaScriptを使ってページを更新した後、ボタンをクリックしたことを思い出す方法は？

<style> 
 
    .highlight { 
 
     background-color: yellow; 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#Table input").click(function() { 
 
      if ($(this).is(":checked")) { 
 
       $(this).parent().parent().addClass("highlight"); 
 
      } else { 
 
       $(this).parent().parent().removeClass("highlight"); 
 
      } 
 
     }); 
 
    }); 
 
    </script> 
 
    <body> 
 
    <div class="col-lg-10"> 
 
    <form name="f"> 
 
    <table id="Table" border="1"><tr> 
 
     <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr><tr> 
 
     <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr><tr> 
 
     <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
 
     <td>Click me</td> 
 
    </tr></table> 
 
    </div>

enter image description here

出典

2017-07-26 Dushee

+0

URLまたはクッキー内のデータ –

答えて

0

stackoverflowethの答えに書かれたアイデアは、しかし、彼のコードが実際に動作しませんでし正しかったです。

相続人（ここでは、プレビューウィンドウで文句を言わない仕事が、あなたはそれをローカルにしようとする場合）作業しlocalStorageことを使用してあなたの例：

<style> 
 
.highlight { 
 
    background-color: yellow; 
 
} 
 
</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("highlight"); 
 
      checked.push($(this).attr("id")); 
 
     } else { 
 
      $(this).parent().parent().removeClass("highlight"); 
 
      checked.remove($(this).attr("id")); 
 
     } 
 
     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("highlight"); 
 
    } 
 
}); 
 
</script> 
 
<body> 
 
<div class="col-lg-10"> 
 
<form name="f"> 
 
<table id="Table" border="1"><tr> 
 
    <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr><tr> 
 
    <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr><tr> 
 
    <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
 
    <td>Click me</td> 
 
</tr></table> 
 
</div>
あなたの最高の賭けをすることを保存するために、おそらくある

出典

2017-07-26 14:00:09

+1

ありがとうMr.Rudie ..それはうまくいきました..本当にありがとう – Dushee

5

あなたは、どこかの状態を保存する必要がいずれかのURLのクエリ文字列としてか、ブラウザのlocalStorageを使用することができます。ページが読み込まれたら、その状態をチェックし、それに応じて強調表示します。

はこのような何かを試してみてください：

$("#Table input").click(function() { 
    if ($(this).is(":checked")) { 
     if(!localStorage.checked) { 
      localStorage.checked = []; 
     } 
     localStorage.checked.push($(this)); 
     $(this).parent().parent().addClass("highlight"); 
    } else { 
     for (var i = 0;i < localStorage.checked.length; i++) { 
      var itemAtIndex = localStorage.checked[i]; 
      if(itemAtIndex == $(this)){ 
       localStorage.splice(i, 1); 
      } 
     } 
     $(this).parent().parent().removeClass("highlight"); 
    } 
}); 


//on page load 
for (var i = 0;i < localStorage.checked.length; i++) { 
    var itemAtIndex = localStorage.checked[i]; 
    itemAtIndex.parent().parent().addClass("highlight"); 
}

出典

2017-07-26 13:01:24 stackoverfloweth

+0

もっと詳しく教えてもらえますか？ – Dushee

+0

私の編集を見て、それはあなたを閉じるべきである – stackoverfloweth

+0

あなたの努力のためにありがとうMr.しかしそれは動作しません – Dushee

 関連する問題

  • 関連する問題はありません^_^