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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
canvas绘制七巧板
2017/02/03 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python对字典进行排序实例
2014/09/25 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python退火算法在高次方程的应用
2018/07/26 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python爬虫容易学吗
2020/06/02 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
便利店促销方案
2014/02/20 职场文书
捐书活动总结
2014/05/04 职场文书
工地质量标语
2014/06/12 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
信仰观后感
2015/06/03 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python