以隱藏的形式檢查所有複選框時更改div顏色

Question

有幾個問題並且找不到解決方案。我的代碼https://jsfiddle.net/46qybyrh/2/

上表HTML

<div class="block"> 
<table> 
    <tr> 
     <th>Nr.</th> 
     <th style="width: 200px">Task</th> 
     <th>Progresas</th> 
     <th></th> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Air port scedules</td> 
     <td>0/3</td> 
     <td> 
      <button onclick="showDiv()">Expand</button> 
     </td> 
    </tr> 
</table> 

隱格

<div id="popup" class="popupbox"> 
    <table class="block"> 
     <tbody> 
     <tr> 
      <td></td> 
      <form> 
       <td>XML</td> 
       <td> 
        <span>Comment</span><br> 
        <textarea></textarea> 
       </td> 
       <td> 
        <span>Deadline</span> 
        <input type="date" value="2017-08-24"> 
       </td> 
       <td>Done:<input type="checkbox"></td> 
       <td><input type="submit" value="Apply"></td> 
      </form> 
     </tr> 
     <tr> 
      <td></td> 
      <form> 
       <td>Scedules</td> 
       <td> 
        <span>Comment</span><br> 
        <textarea></textarea> 
       </td> 
       <td><span>Deadline</span> 
        <input type="date" value="2017-08-10"> 
       </td> 
       <td>Done:<input type="checkbox"></td> 
       <td><input type="submit" value="Apply"></td> 
      </form> 
     </tr> 
     <tr> 
      <td></td> 
      <form> 
       <td>Infobox</td> 
       <td> 
        <span>Comment</span><br> 
        <textarea></textarea> 
       </td> 
       <td><span>Deadline</span> 
        <input type="date" value="2017-08-14"> 
       </td> 
       <td>Done:<input type="checkbox"></td> 
       <td><input type="submit" value="Apply"></td> 
      </form> 
     </tr> 
     </tbody> 
    </table> 
    <button onclick="hideDiv()">close</button></div> 

這段代碼的主要目標應該是：

1. 當按下適用於每一行，隱藏d四不應該隱藏。只有評論，日期，複選框等信息纔會更改。
2. 當選中所有3個複選框時，上表第一行（1個空氣口端口0/3）應更改其背景顏色。
3. 如果截止日期接近（比方說5天截止日期）整行應改變背景顏色。
4. 如果最後期限已過，整行應更改其背景顏色。

我知道它有很多要問，但也許有人會指導我在每一個這些步驟。

Answer 1

1. 使用<button type="button">Apply</button>代替<input type="submit" value="Apply">

2. 給你想改變其顏色的 「id」 屬性的元素，所以通過使用元素

   document.getElementById("elementID").style.backgroundColor = "#colorcode"

3. 的風格propierty改變其顏色這裏是一個如何compare dates的例子。

Answer 2

隱藏div最初是隱藏的。當你提交表單時，你重新加載頁面，所以它又被隱藏了。您可能需要處理點擊按鈕或表單提交，防止默認行爲，通過AJAX請求提交數據，然後更新您的UI，而無需重新加載頁面。

<form onsubmit="return handleSubmit(this);"> 
    ... 
    <input type="checkbox" onchange="updateCheckboxesState();"> 
</form> 
<script> 
function handleSubmit(form) { 
    // send AJAX request here... 
    // manipulate DOM if needed in AJAX callback 
    return false; // prevent submit 
} 
function updateCheckboxesState() { 
    var checkboxes = document.querySelectorAll("form input[type=checkbox]"); 
    for (var i = 0; i < checkboxes.length; i++) { 
     if (!checkboxes.item(i).checked) return; // break on first unchecked 
    } 
    // highlight the row here... 
} 
</script> 

類似的流程可以應用於日期輸入。主要想法是在值更改時更新UI。

背景的變化可以通過改變元素的內嵌樣式或改變其實現的

var el = document.querySelector("div.block > table > tr"); 
el.style.backgroundColor = "#FF0000"; // inline 
el.className = "highlighted"; // element class 

希望，這有助於類...

Answer 3

我把你的小提琴，並把它變成一個codepen和好惹的它一段時間。我可以用很多jQuery來做你想做的事情。要學習jQuery，請嘗試www.w3schools.com/jQuery。

這裏是codepen： https://codepen.io/pen/Ojxzje

在短短的幾個步驟：

• 我刪除了所有的<form>標籤，<input type='submit'>，並<tbody>使代碼更清潔（提交按鈕是造成問題隱藏了div，就像@AngeLOL提到的一樣
• 爲了讓我的jQuery更好地工作，我修改了較低的表格（我添加了一個標題行並從塊中刪除了文本）
• 我包括jQuery庫
• 我改名爲你的jQuery的功能和創造一個更（open()，close()和apply()。它們分別由按鈕調用。
• 在open（）函數中，如果items-[ID OF LIST WE ARE IN]顯示了第二個表中的行，則使用該類。這樣就可以清楚地列出所有任務，而不是每個新列表都有一個新表。
• open()函數也將按鈕從expand更改爲hide它調用關閉功能。
• close()函數只是隱藏第二個表並將該按鈕的名稱更改回expand。
• 只要按下「應用」按鈕，即可運行apply()函數。它執行兩項檢查：
  • 檢查標記爲.details-[ID WE ARE WORKING WITH]的錶行中的所有複選框，如果全部選中，則選擇上表中的列表行。它爲背景添加了綠色。
  • 然後找到所有日期並將它們與今天的日期進行比較（再次感謝@angeLOL。如果日期在5天內，它會選擇日期所在的行並更改顏色。如果日期已過或是今天，它的顏色排紅色。

這是一個很大的代碼和一系列的重組，所以讓我知道，如果你無法理解它，我可以幫助過我的腳步走。