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 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
js代码编写无缝轮播图
Sep 13 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
python根据出生日期获得年龄的方法
2015/03/31 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
python实现神经网络感知器算法
2017/12/20 Python
Python读写锁实现实现代码解析
2020/11/28 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
寒假家长评语大全
2014/04/16 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
高一化学教学反思
2016/02/22 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫