编程 Javascript

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程序设计有所帮助。

JS实现控制表格只显示行边框或者只显示列边框的方法

- Author -

欧阳不疯

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

新老版本juqery获取radio对象的方法

Mar 01 Javascript

js时间比较示例分享(日期比较)

Mar 05 Javascript

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

Apr 22 Javascript

JavaScript实现删除,移动和复制文件的方法

Aug 05 Javascript

js实现的动画导航菜单效果代码

Sep 10 Javascript

jquery实现表单验证简单实例演示

Nov 23 Javascript

Highcharts使用简例及异步动态读取数据

Dec 30 Javascript

javascript基础知识之html5轮播图实例讲解（44）

Feb 17 Javascript

Vue2.0 实现单选互斥的方法

Apr 13 Javascript

微信小程序文章详情页跳转案例详解

Jul 09 Javascript

JavaScript事件循环及宏任务微任务原理解析

Sep 02 Javascript

Openlayers实现测量功能

Sep 25 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