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 相关文章推荐
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
AngularJS中的模块详解
Jan 29 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript实现分页效果
Mar 28 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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实现的Cookies操作类实例
2014/09/24 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
javascript实现画板功能
2020/04/12 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python元组知识点总结
2019/02/18 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
为什么要用EJB
2014/04/17 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
大学生入党思想汇报
2014/01/01 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
村居抓节水倡议书
2014/05/19 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
个人委托函范文
2015/01/29 职场文书