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 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
vue-router history模式下的微信分享小结
2018/07/05 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python实现OpenCV的安装与使用示例
2018/03/30 Python
python生成以及打开json、csv和txt文件的实例
2018/11/16 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
执行Python程序时模块报错问题
2020/03/26 Python
利用python汇总统计多张Excel
2020/09/22 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
教室标语大全
2014/06/21 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
python tkinter模块的简单使用
2021/04/07 Python
基于PyQt5制作一个群发邮件工具
2022/04/08 Python