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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
详解Vue slot插槽
Nov 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
PHP分页显示制作详细讲解
2008/11/19 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
15条JavaScript最佳实践小结
2013/08/09 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
详解weex默认webpack.config.js改造
2018/01/08 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python基础学习之时间转换函数用法详解
2019/06/18 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python opencv实现简易画图板
2020/08/27 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
加班费申请报告
2015/05/15 职场文书
爱护公物主题班会
2015/08/17 职场文书