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获取ul中第一个li的属性
Nov 02 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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 第三节 变量介绍
2012/04/28 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python实现滑雪游戏
2020/02/22 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
Linux的主要特性
2014/10/06 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
静态变量和实例变量的区别
2015/07/07 面试题
食品销售计划书
2014/04/26 职场文书
2014年项目工作总结
2014/11/24 职场文书
岳庙导游词
2015/02/04 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
社区安全温馨提示语
2015/07/14 职场文书
无线电知识基础入门篇
2022/02/18 无线电