源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

用JS控制表格的逐行变色的表单

时间：2020-03-05 12:54 编辑：来源：阅读：
扫一扫，手机访问

摘要：用JS控制表格的逐行变色的表单

优点:
1.代码干净,无冗余标签.
2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.)
3.用JS控制表格的逐行变色
4.支持选中项高亮
5.支持checkbox的全选/取消功能
6.分页标签已经做好,没有做后台代码(以后有时间更新)
7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
友好度良好的表格 
 
 
 
 
<table> 
<caption>友好度良好的表格</caption> 
<thead>  
<tr> 
<th><input name="test" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" title="全选/取消" type="checkbox" value=""></input></th> 
<th>姓名</th> 
<th>性别</th> 
<th>年龄</th> 
<th>生日</th> 
<th>住址</th> 
<th>电话</th> 
<th>电邮</th> 
<th>网址</th> 
</tr> 
</thead>  
<tbody id="tab"> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
<tr> 
<td><input name="test" type="checkbox" value="a"></input> </td> 
<td>张大全</td> 
<td>男</td> 
<td>35</td> 
<td>1971/10/23</td> 
<td>深圳南山</td> 
<td>13612345678</td> 
<td>szzdc@163.com</td> 
<td>http://www.zdc.com</td> 
</tr> 
</tbody>  
<tfoot> 
<tr> 
<td><input name="test" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" title="全选/取消" type="checkbox" value=""></input></td> 
<td colspan="8"> 
<div class="grayr"><span class="disabled"> < </span><span class="current">1</span>[url=http://www.1sucai.cn/article/13534.htm#?page=2]2[/url][url=http://www.1sucai.cn/article/13534.htm#?page=3]3[/url][url=http://www.1sucai.cn/article/13534.htm#?page=4]4[/url][url=http://www.1sucai.cn/article/13534.htm#?page=5]5[/url][url=http://www.1sucai.cn/article/13534.htm#?page=6]6[/url][url=http://www.1sucai.cn/article/13534.htm#?page=7]7[/url]...[url=http://www.1sucai.cn/article/13534.htm#?page=199]199[/url][url=http://www.1sucai.cn/article/13534.htm#?page=200]200[/url][url=http://www.1sucai.cn/article/13534.htm#?page=2] > [/url]</div> 
 
</td> 
</tr> 
</tfoot> 
</table>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
下一篇：js实现键盘控制DIV移动的方法

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部