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 相关文章推荐
文本框回车提交与禁止提交示例
Sep 27 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 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小程序自动提交到自助友情连接
2009/11/24 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
极简的Python入门指引
2015/04/01 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python基于内置函数type创建新类型
2020/10/22 Python
python中append函数用法讲解
2020/12/11 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
python基础之停用词过滤详解
2021/04/21 Python
详解Python函数print用法
2021/06/18 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
TypeScript 内置高级类型编程示例
2022/09/23 Javascript