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入门学习书籍推荐
Jun 12 Javascript
很酷的javascript loading效果代码
Jun 18 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
js实现简单扫雷
2020/11/27 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python os模块简单应用示例
2019/05/23 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
新学期主题班会
2015/08/17 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis