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 相关文章推荐
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
详解JavaScript中return的用法
May 08 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python虚拟环境迁移方法
2019/01/03 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
五年级科学教学反思
2014/02/05 职场文书
合作经营协议书
2014/04/17 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
元宵节晚会主持词
2015/07/01 职场文书
大学生社会服务心得体会
2016/01/22 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python