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之如何使用回调函数
May 16 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
JavaScript实现复选框全选功能
Apr 11 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
PDO::commit讲解
2019/01/27 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python3调用R的示例代码
2018/02/23 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Django实现文件上传和下载功能
2019/10/06 Python
python sorted函数原理解析及练习
2020/02/10 Python
python爬取微博评论的实例讲解
2021/01/15 Python
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
如何进行Linux分区优化
2016/09/13 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
高三地理教学反思
2014/01/11 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
财产分割协议书范本
2014/11/03 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis