Question

如何使整个td成为一个复选框，单击该复选框将更改颜色（并将复选框的值更改为选中）。 td的行为将是：

未选中时，td的背景颜色将为白色
选中后，td的背景颜色将变为红色
将没有复选框，因为整个td将成为复选框

另一个编辑：这是我执行的how

编辑：这是不完整的代码（这只是草稿）

<!DOCTYPE html>
<html>
    <head>
        <title>Header</title>
        <link rel="stylesheet" type="text/css" href="/primary.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" async></script>
        <script type="text/javascript" src="scripter.js" async></script>
    </head>
    <body>
        <div class="table">
            <!-- <form method="POST"> -->
                    <table id='sample'>
                            <tr>
                                <th>Time\Date</th>
                                <th>Monday</th>
                                <th>Tuesday</th>
                                <th>Wednesday</th>
                                <th>Thursday</th>
                                <th>Friday</th>
                                <th>Saturday</th>
                                <th>Sunday</th>
                            </tr>
                            <tr>
                                <td>07:30-08:00</td>
                                <td id="A1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'"><input type="checkbox" >A1</input></td>
                                <td id="B1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">B1</td>
                                <td id="C1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">C1</td>
                                <td id="D1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">D1</td>
                                <td id="E1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">E1</td>
                                <td id="F1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">F1</td>
                                <td id="G1" onclick="this.bgColor=='#FFFFFF' ? this.bgColor='#FF0000' : this.bgColor='#FFFFFF'">G1</td>
                            </tr>
                            <tr>
                                <td>08:00-08:30</td>
                                <td>A1</td>
                                <td>B1</td>
                                <td>C1</td>
                                <td>D1</td>
                                <td>E1</td>
                                <td>F1</td>
                                <td>G1</td>
                            </tr>
                            <tr>
                                <td>08:30-09:00</td>
                                <td>A1</td>
                                <td>B1</td>
                                <td>C1</td>
                                <td>D1</td>
                                <td>E1</td>
                                <td>F1</td>
                                <td>G1</td>
                            </tr>
                    </table>
            <!-- </form> -->
        </div>
    </body>
</html>

Answer 1

我可以为您提供实现方法的想法，您可以尝试一下，如果没有的话会有所帮助。

您可以做的是使td带有复选框，但不显示任何复选框。

当用户单击td元素时，将触发该复选框的打开和关闭，并基于打开和关闭（即选中和未选中），您可以根据需要设置CSS样式

Answer 2

这是一个正在运行的演示，希望能对您有所帮助！

var checked=false;
var checkbox=document.getElementsByClassName("checkbox")[0];
function toggleCheckbox(){
  checked = !checked;
  if(checked){
   checkbox.classList.add("checked");
  }else{
   checkbox.classList.remove("checked");
  }
}

.checkbox{
   width:25px;
   height:25px;
   border:1px solid red;
   cursor:pointer;
   text-align:center;
}

.checked{
  background:red;
}

<table>
  <tr>
    <td class="checkbox" onclick="toggleCheckbox()"></td>
    <td>Test</td>
    <td>Colony</td>
    <td>4456</td>
  </tr>
</table>

整个<td>作为复选框

2 个答案: