开发者社区> 清山> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript+CSS实现表格动态样式

简介:
+关注继续查看

效果如图:

实现代码:

<style> table.formdata/*表格样式*/ { border:1px solid #5F6F7E; border-collapse:collapse;/*表格相邻边被合并 */ font-family:微软雅黑; font-size:10px; padding:2px; } </style> <script type="text/javascript"> function hilite(obj) { //选择包含<input>的<td>标记 obj = document.getElementById("td"+obj.id.toString()); obj.style.border = '2px solid #007EFF'; //加粗、变色 } function delite(obj) { obj = document.getElementById("td"+obj.id.toString()); obj.style.border = '0px solid #ABABAB'; //恢复回原来的边框 } </script> <table class="formdata"> <tr> <th></th> <th>2004</th> <th>2005</th> <th>2006</th> </tr> <tr> <tr><!--onFocus聚焦时,onBlur当光标离开时的事件;注意:td单元格的id比文本框的id多一个“td”,正是这样才能选择到包含<input>的<td>标记--> <th style="width:50px;">张三</th> <td id="tdzhangsan2004"><input type="text" id="zhangsan2004" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdzhangsan2005"><input type="text" id="zhangsan2005" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdzhangsan2006"><input type="text" id="zhangsan2006" onFocus="hilite(this);" onBlur="delite(this);"></td> </tr> <tr> <th>李四</th> <td id="tdlisi2004"><input type="text" id="lisi2004" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdlisi2005"><input type="text" id="lisi2005" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdlisi2006"><input type="text" id="lisi2006" onFocus="hilite(this);" onBlur="delite(this);"></td> </tr> <tr> <th>王五</th> <td id="tdwangwu2004"><input type="text" id="wangwu2004" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdwangwu2005"><input type="text" id="wangwu2005" onFocus="hilite(this);" onBlur="delite(this);"></td> <td id="tdwangwu2006"><input type="text" id="wangwu2006" onFocus="hilite(this);" onBlur="delite(this);"></td> </tr> </table>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS表格小案例
JS表格小案例
0 0
JavaScript实现动态写入表格
如果我们在写程序的时候,接收到了后台传入的数据,怎么样用原生JavaScript把数据写入表格呢?如果第二次传来的数据与第一次不一样的话该怎么办呢?
0 0
通过Javascript实现把数组里的内容以表格方式呈现到页面从
通过Javascript实现把数组里的内容以表格方式呈现到页面从
0 0
【Web前端】【JavaScript】实现表格隔行变色
【Web前端】【JavaScript】实现表格隔行变色
0 0
通过CSS,H5,JavaScript实现表格表单的随机选择,和简单的随机点名
学习通过CSS,H5,JavaScript实现表格表单的随机选择,和简单的随机点名。
0 0
js将table生成excel文件并去除表格中的多余tr(js去除表格中空的tr标签)
由于数据非常的乱,php的方法肯定是行不通了,于是我打算 用前端的方法将table表中的数据下载下来。于是乎 ,我打印看了下源代码,发现多了很多tr标签。做好了之后,可以正常使用,将数据库的信息筛选出来。,其他网上的我的没有成功,这个可以解决。但是下载下来的文件,出现空格。可以参考这个文件,很有用。对方加了一个功能下载,将其替换掉 完美解决。......
0 0
【JavaScript】完善注册表单校验&案例2:表格隔行换色
本期主要介绍完善注册表单校验&案例2:表格隔行换色
0 0
Javascript知识【案例:表格隔行换色】
Javascript知识【案例:表格隔行换色】
0 0
JS 生成表格后 ,中文显示乱码
JS 生成表格后 ,中文显示乱码
0 0
JavaScript制作表格隔行变色效果(新浪微博中的应用)
JavaScript制作表格隔行变色效果(新浪微博中的应用)
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载