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

最新推荐文章于 2020-11-24 11:27:44 发布
最新推荐文章于 2020-11-24 11:27:44 发布
阅读量91 收藏
点赞数
文章标签： JavaScript Opera XHTML CSS 浏览器 ViewUI

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>友好度良好的表格</title> 
<style type="text/css"> 
*{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";} 
table{ 
    width:700px; 
    margin:0px auto; 
    font:Georgia 11px; 
    font-size:12px; 
    color:#333333; 
    text-align:center; 
    border-collapse:collapse;/*细线表格代码*/ 
} 
table td{ 
    border:1px solid #999;/*细线表格线条颜色*/ 
    height:22px; 
} 
caption{text-align:center;font-size:12px;font-weight:bold;margin:0 auto;} 
tr.t1 td {background-color:#fff;}/* 交替行第一行的背景色 */ 
tr.t2 td {background-color:#eee;}/* 交替行第二行的背景色 */ 
tr.t3 td {background-color:#ccc;}/* 鼠标经过时的背景色 */ 
th,tfoot tr td{font-weight:bold;text-align:center;background:#c5c5c5;} 
th{line-height:30px;height:30px;} 
tfoot tr td{background:#fff;line-height:26px;height:26px;} 
thead{border:1px solid #999;} 
thead tr td{text-align:center;} 
#page{text-align:center;float:right;} 
#page a,#page a:visited{width:60px;height:22px;line-height:22px;border:1px black solid;display:block;float:left;margin:0 3px;background:#c9c9c9; 
text-decoration:none;} 
#page a:hover{background:#c1c1c1;text-decoration:none;} 
.grayr {padding:2px;font-size:11px;background:#fff;float:right;} 
.grayr a {padding:2px 5px;margin:2px;color:#000;text-decoration:none;;border:1px #c0c0c0 solid;} 
.grayr a:hover {color:#000;border:1px orange solid;} 
.grayr a:active {color:#000;background: #99ffff} 
.grayr span.current {padding:2px 5px;font-weight:bold; margin:2px; color: #303030;background:#fff;border:1px orange solid;} 
.grayr span.disabled {padding:2px 5px;margin:2px;color:#797979;background: #c1c1c1;border:1px #c1c1c1 solid;} 
</style> 
<script type="text/javascript"> 
<!-- 
function selectAll() 
{ 
    if(this.checked==true) {  
        checkAll('test');  
    }  
    else {  
        clearAll('test');  
    } 
} 
function checkAll(name) 
{ 
    var el = document.getElementsByTagName('input'); 
    var len = el.length; 
    for(var i=0; i<len; i++) 
    { 
        if((el[i].type=="checkbox") && (el[i].name==name)) 
        { 
            el[i].checked = true; 
        } 
    } 
} 
function clearAll(name) 
{ 
    var el = document.getElementsByTagName('input'); 
    var len = el.length; 
    for(var i=0; i<len; i++) 
    { 
        if((el[i].type=="checkbox") && (el[i].name==name)) 
        { 
            el[i].checked = false; 
        } 
    } 
} 
--> 
</script> 
</head> 
<body> 
<table> 
<caption>友好度良好的表格</caption> 
<thead>  
<tr> 
<th><input οnclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消"/></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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 type="checkbox" value="a" name="test"/> </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 οnclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消"/></td> 
<td colspan="8"> 
<div class="grayr"><span class="disabled"> < </span><span class="current">1</span><a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a><a href="#?page=2"> > </a></div> 
<!-- 
<div id="page"> 
<a href="">首　页</a><a href="">上一页</a><a href="">下一页</a><a href="">末　页</a></div>--> 
</td> 
</tr> 
</tfoot> 
</table> 
<script type="text/javascript"> 
<!-- 
var Ptr=document.getElementById("tab").getElementsByTagName("tr"); 
function $() { 
    for (i=1;i<Ptr.length+1;i++) {  
    Ptr[i-1].className = (i%2>0)?"t1":"t2";  
    } 
} 
window.οnlοad=$; 
for(var i=0;i<Ptr.length;i++) { 
    Ptr[i].οnmοuseοver=function(){ 
    this.tmpClass=this.className; 
    this.className = "t3"; 
     
    }; 
    Ptr[i].οnmοuseοut=function(){ 
    this.className=this.tmpClass; 
    }; 
} 
//--> 
</script> 
</body> 
</html>
 
kyo19
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端vue用js更改表格某一行背景色方法
qq_43644046的博客
01-19 2903
前端vue用js获取列表某一行后改变背景颜色（可以用改变背景色来代替获取焦点） 找到要获取的行或者组件 寻找id属性或者class属性 虽然class属性可能设置的一样，但是可以全部获取，可以刚好后面接[i]值 data里面添加 data(){ idSearch:[], wantSearch:'', tableData: [],//你要改变的表，需要你自己的数据 num:0, } method方法里面添加 效果图 ...
js 实现 表格选中后变色
03-31
js 实现 表格选中后变色! 值得下载看看!资源免费,大家分享!!
列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
Leon_Jinhai_Sun的博客
01-15 683
列表隔行变色 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.1.js"></script> <scr...
JS控制表格隔行变色
01-19
”800″ border u201d0″ cellpadding=”0″ cellspacing>  不变色  ”goaler”>  <td>xxxxxxxx   <td>xxxxxxxx   <td>xxxxxxxx   <td>xxxxxxxx  </tbod
JavaScript实现表格快速变色效果代码
10-23
主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
javascript实现table表格隔行变色的方法
10-24
主要介绍了javascript实现table表格隔行变色的方法,涉及javascript针对表格元素与样式的操作技巧,需要的朋友可以参考下
常见表单隔行变色、某属性值变色、悬停变色
chaosama的博客
03-09 580
1、隔行变色呢，用到的是结构化伪类 <ul> <li>1</li> <li>2</li> </ul> li:nth-child(2n+3) { background:#ff0000; } (2n+3)：2行变一次色，从第三行开始 2、遇到某属性值变色，实际上用的是属性选择器的一种 <ul> ...
javaScript+CSS实现表格变色
snoopy的专栏
09-16 750
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb
如何实现表格中鼠标划过一行整行变色，点击一行选中一行
qq_40422692的博客
07-21 4489
这里`在这里插入代码片`写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你
列表记录自动逐条高亮显示
chaochao52001的博客
04-01 265
通常我们在浏览网页的时候经常会看到多行热点信息列表数据，会每隔几秒钟在页面上就会顺次高亮显示链接标题的效果。 这种效果在我们的业务系统中也比较常见，比如企业仪表盘中部分区块的列表数据，网格式报表中。 在报表展现的页面中，如何能让所有数据行在指定的时间间隔内自动顺次高亮显示呢？还有如何做到无闪烁刷新页面来改变行的颜色呢？ 下面我以设计器下报表实例网格式报表.rpx 为例具体说下实现方法...
前端-table表格隔行变色
热门推荐
qsloony的博客
05-21 2万+
table表格隔行变色 作为一个后端的我，在某公司无前端工程师时，系统那体验自己用起来都想骂人了。今天就纪录一下，自己在后台经常用到的一个小玩意。 :nth-child(): 定义和用法 :nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式 使用:nth-child()可以表格数据看起来更加的直观，说到这我就得说说当时的情况：后
逐行变色(划过变色)
QQ_907465912的博客
11-09 258
dan9     .even{         background-color: #999;     }     .odd{         background-color: #ccc;     } #table tr:hover{ background:#F50408;} $(function(){ var ul=document.getElement
js实现表格变色点击行颜色改变
caiyl1314的专栏
03-22 1万+
js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid black; cursor:default; } td { border-bottom:1px
遍历表格的每一行来改变点击的背景颜色，并且只触发一次和表格默认的时候对表格奇偶变化颜色问题
张亮亮的博客
07-17 708
问题一：我们在对表格的行进行点击事件，来改变本身行颜色变化 解决方法:   问题二：有时候我们要处理表格数据加载的时候就要对表格本身的行进行奇偶数来使不同的颜色变化 解决方法:     自定义表格的class  .tableBgColor { tbody&gt;tr:nth-child(odd) &gt;td {background-color:#dff0d8;} tbody&gt;tr:n...
如何定位并高亮显示在列表控件中找到的行
baixiaohei09的专栏
11-24 394
我们在应用中有时候需要在列表控件中找到一条记录，而这条记录可能不再当前页，而我们需要把这条记录找到并高亮显示到当前页中，那么如何实现呢 代码如下： CString s1 = "要查找的内容"; for( int Item=0;Item<"列表控件的总行数";Item++ ) { //逐行查询，获取该行子项内容 CString s2 = ((CListCtrl*)GetDlgItem(IDC_LIST1))->GetItemText( Item, "查找内容相匹配的列号"
用html+javascript做一个表格隔行变色的5*5表格
最新发布
04-11
可以用以下代码实现： ``` <!DOCTYPE html> 表格隔行变色 table{ border-collapse: collapse; width: 50%; margin: auto; } th, td{ border: 1px solid black; padding: 10px; text-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值