如何保存更改後的顏色複選框刷新頁面後加載

早上好。我正在嘗試製作一個「檢查器」，以便知道今天我已經做過的激戰2的老闆們，並且記住使用複選框更改顏色的問題。我有一個從數據庫加載的老闆表，它的默認顏色是紅色的。當你勾選複選框時，整個變成綠色。這部分工作到目前爲止。問題是刷新頁面時會回到紅色。複選框保持勾選狀態，但顏色回到默認值。我想這可以使用cookie或會話來完成，但因爲在我有點迷路之前我從未使用它。如何保存更改後的顏色複選框刷新頁面後加載

<?php 
    include 'joinDB.php'; 
    $dotaz="SELECT `name`, `zone`, `map`, `wplink` FROM `bosses` 
    ORDER BY `name` ASC"; 
    $vysledek=mysqli_query($spojeni, $dotaz, MYSQLI_USE_RESULT);  
    $checkID = 1; 
    while(list($name, $zone, $map, $wplink)=mysqli_fetch_array($vysledek)) {  
    echo " 
    <tr id='$checkID' style=\"background-color:#fa6361\"> 
    <td style='width:200px'>$name</td> 
    <td style='width:160px'>$zone</td> 
    <td style='width:160px'>$map</td> 
    <td>$wplink</td> 
    <td><form method='post'><input id='checkBoxesRow' type='checkbox' onclick=\"document.getElementById('$checkID').style.backgroundColor=this.checked?'#90AF0F':'#fa6361'\" ><br/></form></td> 
    </tr> 
    ";  
    $checkID++; 
    } 
?>

我用這個在檢查時改變顏色。我試圖尋找答案，但到目前爲止，我沒有找到方法來使用我發現使我的代碼工作的解決方案...所有答案讚賞:)

來源

2016-08-16 Asassin53

您既可以更新db表指示戰績已經「完成」，使用'cookies'或'localStorage' – RamRaider

是的，我知道。我不想使用數據庫，因爲它需要提交和刷新以獲取值。而且由於我從來沒有使用過cookies或會話，所以我不知道如何在那裏存儲這類數據。 – Asassin53

我想說，你應該只有1表單，每個複選框應該有一個監聽器函數註冊來處理點擊。然後，監聽器應該使用json樣式的數據更新te'localStorage'，這些數據會在加載頁面時讀取。 MDN在'localStorage'和'sessionStorage'上有一些很好的文章https://developer.mozilla.org/en/docs/Web/API/Window/localStorage https://developer.mozilla.org/en-US/docs/ Web/API/Window/sessionStorage – RamRaider

快速放在一起使用localStorage保留狀態複選框。這應該是很容易與您現有的代碼集成 - 替代適合data-id值，例如$name

echo "<form id='guildwars' method='post'> 
    <table>"; 
/* This should be your db results being looped through */ 
for($i=0; $i < 10; $i++){ 
    $id="boss_$i"; 
    echo " 
     <tr> 
      <td>\$NAME</td> 
      <td>\$ZONE</td> 
      <td>\$MAP</td> 
      <td><input type='checkbox' data-id='$id' /></td> 
     </tr>"; 
} 
echo " 
    </table> 
</form>"; 


<script type='text/javascript' charset='utf-8'> 
    var store='guildwars'; 

    function bindEvents(){ 
     var col=document.getElementById('guildwars').querySelectorAll('input[type="checkbox"]'); 
     var oStore=JSON.parse(localStorage.getItem(store)); 

     if(col)for(var n in col)if(col[n].nodeType==1){ 
      /* assign listener to the checkbox */ 
      col[n].addEventListener('click', register, false); 

      /* obtain reference to parent table row */ 
      var tr=col[n].parentNode.parentNode; 

      /* assign pale red to indicate `not done` */ 
      setcolour(tr,0); 

      /* re-tick previously selected checkboxes */ 
      if(oStore!=null && oStore.indexOf(col[n].dataset.id)!=-1){ 
       col[n].checked=true; 
       setcolour(tr,1); 
      } 
     } 
    } 

    function setcolour(n,i){ 
     n.style.backgroundColor=i==1 ? '#90AF0F' : '#fa6361'; 
    } 

    function register(event){ 
     var el=event.target; 
     var tr=el.parentNode.parentNode; 
     var id=el.dataset.id; 

     oStore=localStorage.getItem(store)!=null ? JSON.parse(localStorage.getItem(store)) : []; 
     if(el.checked) { 
      oStore.push(id); 
      setcolour(tr,1); 
     } else { 
      oStore.splice(oStore.indexOf(id),1); 
      setcolour(tr,0); 
     } 
     localStorage.setItem(store, JSON.stringify(oStore)); 
    } 

    /* bind the event listeners */ 
    document.addEventListener('DOMContentLoaded',bindEvents,false); 
</script>

來源

2016-08-16 07:22:03 RamRaider

如何保存更改後的顏色複選框刷新頁面後加載

回答

相關問題