javascript - 在选中隐藏形式的所有复选框时更改 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

<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. 当在每一行上按“应用”时，隐藏的 div 不应隐藏。仅应更改评论、日期、复选框等信息。
2. 选中所有 3 个复选框后，上方表格第一行(1 机场时间表 0/3)应更改其背景颜色。
3. 如果截止日期临近(假设距离截止日期还有 5 天)整行应更改背景颜色。
4. 如果截止日期已过，整行应更改其背景颜色。

我知道有很多问题要问，但也许你们中的某个人会指导我完成每个步骤。

Answer 1

我把你的 fiddle 放入代码笔中并摆弄了一会儿。我能够用大量的 jQuery 来做你想做的事情。要学习 jQuery，请尝试 www.w3schools.com/jQuery。

这是代码笔: https://codepen.io/pen/Ojxzje

只需几个简短的步骤:

• 我删除了所有 <form>标签，<input type='submit'> ，和<tbody>使代码更清晰(提交按钮导致隐藏 div 的问题，如 @AngeLOL 提到的。
• 我对下面的表格进行了一些重新格式化，只是为了使其更清晰，以便我的 jQuery 能够正常工作。 (我添加了标题行并从 block 中删除了文本)
• 我包含了 jQuery 库
• 我重命名了您的 jQuery 函数并创建了另一个函数( open() 、 close() 和 apply() 。它们分别由按钮调用。
• 在 open() 函数中，我使用 if items-[ID OF LIST WE ARE IN] 类显示了第二个表中的行。 。这样就可以有一个包含所有任务的干净列表，而不是为每个新列表创建一个新表。
• open()函数还将按钮从 expand 更改为至hide它调用关闭函数。
• close()函数只是隐藏第二个表并将按钮的名称更改回 expand .
• apply()每当您按下“应用”按钮时，函数就会运行。它执行两项检查:
  • 选中表行中标记为 .details-[ID WE ARE WORKING WITH] 的所有复选框如果它们都被选中，则选择上表中的列表行。它为背景添加了绿色。
  • 然后它会找到所有日期并将它们与今天的日期进行比较(再次感谢@angeLOL。如果日期在 5 天内，它会选择日期所在的行并更改颜色。如果日期已经过去或是今天，它将行染成红色。

这是大量代码和大量重组，所以如果您在理解时遇到困难，请告诉我，我可以帮助您完成我的步骤。