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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
Javascript开发之三数组对象实例介绍
Nov 12 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 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
深入密码加salt原理的分析
2013/06/06 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
js实现日历
2020/11/07 Javascript
VSCode下好用的Python插件及配置
2018/04/06 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
你常见到的runtime exception
2016/09/05 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
园林资料员岗位职责
2013/12/30 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技