gpt4 book ai didi

javascript - 整个 作为复选框

转载 作者:行者123 更新时间:2023-11-28 16:53:10 24 4
gpt4 key购买 nike

我怎样才能使整个 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>

最佳答案

我可以告诉您如何实现它的想法,您可以尝试一下,如果没有,那么会有帮助。

你可以做的是让 td 有一个复选框,但让它不显示。

当用户单击 td 元素时,会触发该复选框打开和关闭,并根据打开和关闭,即选中和未选中,您可以根据需要设置样式的 css

关于javascript - 整个 <td> 作为复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58245577/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com