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>

此代码的主要目标应为：

当按下每行时，隐藏的div不应隐藏。只有评论，日期，复选框等信息才能更改。
当选中所有3个复选框时，上表第一行（1个空气端口0/3）应更改其背景颜色。
如果截止日期已结束（比如截止日期前5天），整行应改变背景颜色。
如果截止日期已过，则整行应更改其背景颜色。

我知道要问的很多，但也许有人会指导我完成这些步骤。

Answer 1

我拿起你的小提琴，把它放进一个圆锥笔，然后把它弄乱了一会儿。我能用大量的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（）函数中，我在第二个表中显示了行{if items-[ID OF LIST WE ARE IN]。这样就可以有一个干净的所有任务列表，而不是每个新列表都有一个新表。
open()功能还会将按钮从expand更改为调用关闭功能的hide。
close()功能只隐藏第二个表格，并将按钮名称更改回expand。
只要按“应用”按钮，就会运行apply()功能。它执行两项检查：
- 检查标记为.details-[ID WE ARE WORKING WITH]的表格行中的所有复选框，如果全部选中，则选择上表中的列表行。它为背景添加了绿色。
- 然后找到所有日期并将它们与今天的日期进行比较（再次感谢@angeLOL。如果日期在5天之内，它会选择日期所在的行并更改颜色。如果日期已过，或者今天是，它将红色排成一行。

这是很多代码和一堆重组，所以如果你在理解它时遇到问题请告诉我，我可以帮助我完成我的步骤。

Answer 2

使用<button type="button">Apply</button>代替<input type="submit" value="Apply">
将要更改颜色的元素添加到＆＃34; id＆＃34;属性，所以通过使用元素的样式属性来改变它的颜色

document.getElementById("elementID").style.backgroundColor = "#colorcode"
以下是compare dates。

Answer 3

隐藏的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

希望，这有助于......

检查隐藏形式的所有复选框时更改div颜色

3 个答案: