Javascript 选中隐藏表单中的所有复选框时更改div颜色_Javascript_Forms_Html Table_Submit

Javascript 选中隐藏表单中的所有复选框时更改div颜色

javascript forms

Javascript 选中隐藏表单中的所有复选框时更改div颜色,javascript,forms,html-table,submit,Javascript,Forms,Html Table,Submit,有几个问题，找不到解决办法。我的代码上表HTML <div class="block"> <table> <tr> <th>Nr.</th> <th style="width: 200px">Task</th> <th>Progresas</th> <th></th> </tr&

有几个问题，找不到解决办法。我的代码

上表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>


编号。
任务
进步
1.
机场时间表
0/3
扩大

隐藏分区

<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>


XML
评论

最后期限
完成：
日程
评论

最后期限
完成：
信息箱
评论

最后期限
完成：
关

本守则的主要目的应是：

在每行上按apply时，隐藏的div不应隐藏。只有注释、日期、复选框等信息应该更改

选中所有3个复选框后，上表第一行（1个进气口图标0/3）应更改其背景颜色

如果截止日期临近（比如说截止日期前5天），整行应该改变背景色

若截止日期已过，则整行应更改其背景色

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

使用

Apply

代替

给那个些你们想要改变颜色的元素一个“id”属性，所以通过使用元素的样式属性来改变它的颜色

document.getElementById（“elementID”）.style.backgroundColor=“#colorcode”

下面是一个如何使用的示例

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

希望，这能帮上忙…

我把你的小提琴放进密码笔里乱搞了一会儿。我可以用很多jQuery做你想做的事情。要学习jQuery，请访问www.w3schools.com/jQuery

这是代码笔：

在几个简短步骤中：

我删除了所有的
标记、
和
以使代码更干净（提交按钮导致隐藏div时出现问题，如@AngeLOL所述）
我重新格式化了下表，只是为了使jQuery更干净，以便更好地工作。（我添加了一个标题行，并从块中删除了文本）
我包括了jQuery库
我重命名了jQuery函数并创建了另外一个（
```
open（）
```
，
```
close（）
```
，和
```
apply（）
```
），它们分别由按钮调用
在open（）函数中，我用if
```
items-[ID OF LIST OF WE in]
```
类显示了第二个表中的行。这样，就可以有一个干净的所有任务列表，而不是每个新列表都有一个新表
```
open（）
```
函数还将按钮从
```
expand
```
更改为
```
hide
```
，从而调用close函数
```
close（）
```
函数只是隐藏了第二个表，并将按钮的名称更改回
```
expand
```
每当按下应用按钮时，
```
apply（）
```
功能就会运行。它执行两项检查：
- 检查表行中标记为
```
.details-[ID我们正在使用]
```
  的所有复选框，如果全部选中，则选择上表中的列表行。它会在背景中添加绿色
- 然后，它会找到所有日期，并将它们与今天的日期进行比较（再次感谢@angeLOL。如果日期在5天之内，它会选择日期所在的行并更改颜色。如果日期已过或是今天，它会将该行涂成红色

这需要大量的代码和大量的重组，因此如果您在理解上有困难，请告诉我，我可以帮助您完成我的步骤。

我想我已经了解了您要做的事情。我正在开发一个改进的版本。我将对其进行注释，并在此处添加一些信息，解释我为什么要这么做。给我15或20米的时间分钟。在某些浏览器中，默认情况下按钮也会提交表单。您仍然需要阻止实际提交。@БСаааачааачааачааа1095

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