JS实现控制表格只显示行边框或者只显示列边框的方法


Posted in Javascript onMarch 31, 2015

本文实例讲述了JS实现控制表格只显示行边框或者只显示列边框的方法。分享给大家供大家参考。具体分析如下:

通过下面的JS代码你可以控制表格只显示行与行之间的分隔线,也可以只显示列与列之间的分隔线,主要用到了表格对象的rules属性

<!DOCTYPE html>
<html>
<head>
<script>
function rowRules()
{
document.getElementById('myTable').rules="rows";
}
function colRules()
{
document.getElementById('myTable').rules="cols";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<input type="button" onclick="rowRules()" value="Show only row borders">
<input type="button" onclick="colRules()" value="Show only col borders">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
js友好的时间返回函数
Aug 24 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 #Javascript
JS显示表格内指定行html代码的方法
Mar 31 #Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 #Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 #Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 #Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 #Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python使用opencv读取图片的实例
2017/08/17 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
请解释在new与override的区别
2012/10/29 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
就业推荐表院系意见
2015/06/05 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle