如何保存更改后的颜色复选框刷新页面后加载

早上好。我正在尝试制作一个“检查器”，以便知道今天我已经做过的激战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

如何保存更改后的颜色复选框刷新页面后加载

回答

相关问题