cs_*_*irl 9 javascript jquery html-table
我正在试图弄清楚如何做到这一点,但我无法在任何地方找到这些信息.基本上,我有一个表格,每个单元格都包含一个复选框.我希望能够通过单击单元格中的任意位置来勾选复选框.我无法弄清楚如何做到这一点,Javascript对我来说是最好的解决方案,但我也可以使用jQuery.
这是我的一排表,我希望这样做:
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkbox" name="free" value="mon09"></center></td>
<td><center><input type="checkbox" name="free" value="tue09"></center></td>
<td><center><input type="checkbox" name="free" value="wed09"></center></td>
<td><center><input type="checkbox" name="free" value="thu09"></center></td>
<td><center><input type="checkbox" name="free" value="fri09"></center></td>
</tr>
小智 17
为什么不使用纯CSS解决方案？这样就可以使用标签来实现您的目标.
<tr>
<td><center>9:00 - 10:00</center></td>
<td><label><input type="checkbox" name="free" value="mon09"></label></td>
<td><label><input type="checkbox" name="free" value="tue09"></label></td>
<td><label><input type="checkbox" name="free" value="wed09"></label></td>
<td><label><input type="checkbox" name="free" value="thu09"></label></td>
<td><label><input type="checkbox" name="free" value="fri09"></label></td>
</tr>
<style type="text/css">
td label {
display: block;
text-align: center;
}
</style>
有关更高级的工作演示,请查看http://jsfiddle.net/8q5TQ/7/
这应该可以做到：
<html>
<head>
<script type="text/javascript">
function onload() {
var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
tds[i].onclick =
function(td) {
return function() {
tdOnclick(td);
};
}(tds[i]);
}
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].onclick =
function(input){
return function() {
inputOnclick(input);
};
}(inputs[i]);
}
}
function tdOnclick(td) {
for(var i = 0; i < td.childNodes.length; i++) {
if(td.childNodes[i].nodeType == 1) {
if(td.childNodes[i].nodeName == "INPUT") {
if(td.childNodes[i].checked) {
td.childNodes[i].checked = false;
td.style.backgroundColor = "red";
} else {
td.childNodes[i].checked = true;
td.style.backgroundColor = "green";
}
} else {
tdOnclick(td.childNodes[i]);
}
}
}
}
function inputOnclick(input) {
input.checked = !input.checked;
return false;
}
</script>
</head>
<body onload="onload()">
<table>
<tr>
<td><center>9:00 - 10:00</center></td>
<td><center><input type="checkbox" name="free" value="mon09"></center></td>
<td><center><input type="checkbox" name="free" value="tue09"></center></td>
<td><center><input type="checkbox" name="free" value="wed09"></center></td>
<td><center><input type="checkbox" name="free" value="thu09"></center></td>
<td><center><input type="checkbox" name="free" value="fri09"></center></td>
</tr>
</table>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
8544 次 |
| 最近记录： |