Table
表格包含标题、表头、表体和页脚。
标题-----caption
表头-----thead
表体-----tbody
页脚-----tfoot
表格中的行、列、表头。
行-----tr
列-----td
表头-----th
表格中定义列的属性col 和colgroup
colgroup-----定义了表格中每列的统一标准。
col-----则是在标准中展现出的每列的独特个性。
html结构
<table>
<caption>标题</caption> <!--标题-->
<colgroup> <!--列属性组-->
<col/> <!--列属性-->
</colgroup>
<thead> <!--表头-->
</thead>
<tbody> <!--表体-->
</tbody>
<tfoot> <!--页脚-->
</tfoot>
</table>
效果图
代码
empty
表格选择框
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
width: 300px;
margin: 50px auto;
}
#t_head{
background-color:#1E90FF;
text-align: center;
}
th,td{
border: 1px solid #ccc;
text-align: center;
padding:10px;
}
th{
font:bold 18px "微软雅黑" ;
color: white;
}
td{
font:16px "微软雅黑";
}
菜名厨师价格
红烧鱼小二18狮子头小张28红烧茄子李琪12豆腐脑舒淇15
<script>
window.οnlοad=function(){
var qx = document.getElementById('qx'),
inputs = tbody.getElementsByTagName('input');
//全选按钮的状态，就是表体中选择框的状态
qx.onclick = function(){
for(var i = 0; i < inputs.length; i++)
{
inputs[i].checked = qx.checked;
}
};
//遍历所有选择框，如果选择框全部选择时，全选按钮也应该被勾选，否则，不勾选
for(var i = 0; i < inputs.length; i++){
var input = inputs[i];
input.οnclick=function(){
var flag = true; //假设所有的都被选中
//检查是否全部都被勾选
for(var i = 0; i < inputs.length; i++){
var input = inputs[i];
if(input.checked == false){
flag = false;
}
}
if(flag){
qx.checked=true;
}
else{
qx.checked=false;
}
}
}
};
</script>
