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 相关文章推荐
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
JavaScript实现表单验证功能
Dec 09 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的性能
2013/10/30 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
webpack入门必知必会
2017/01/16 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
浅析Python数据处理
2018/05/02 Python
Django 开发环境配置过程详解
2019/07/18 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Python中Yield的基本用法
2020/10/18 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
公司会计岗位职责
2014/02/13 职场文书
环保倡议书500字
2014/05/15 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server