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

更新时间：2015年03月31日 11:14:23 作者：欧阳不疯

这篇文章主要介绍了JS实现控制表格只显示行边框或者只显示列边框的方法,涉及javascript使用表格对象的rules属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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时间复杂度和空间复杂度，时间复杂度和空间复杂度是衡量一个算法是否优秀的标准，通常我们比较两个算法时会用预先估算和事后统计，下文详细介绍，需要的朋友可以参考一下
2022-07-07
Javascript实现DIV滚动自动滚动到底部的代码
一个比较特殊的客户要求，在一个页面用表格显示数据，数据量不是很多，不希望使用浏览器的滚动条，只能在Div中滚动table中的数据，但是有个特殊的要求，就是必须将滚动条自动滚动到底部
2012-03-03
移动端日期插件Mobiscroll.js使用详解
这篇文章主要为大家详细介绍了移动端日期插件Mobiscroll.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
JS+CSS实现炫酷算盘时钟效果
这篇文章主要为大家详细介绍了如何使用JavaScript和CSS实现炫酷算盘时钟效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
js 走马灯简单实例
这篇文章主要介绍了js 走马灯简单实例，有需要的朋友可以参考一下
2013-11-11
让FireFox支持innerText的实现代码
DHTML非标准属性innerText在FireFox中的使用
2009-12-12
详述JavaScript实现继承的几种方式(推荐)
这篇文章主要介绍了详述JavaScript实现继承的几种方式(推荐)的相关资料,需要的朋友可以参考下
2016-03-03
JavaScript实现计算圆周率到小数点后100位的方法示例
这篇文章主要介绍了JavaScript实现计算圆周率到小数点后100位的方法,简单分析了圆周率计算的原理并结合实例形式给出了javascript计算圆周率的具体操作技巧,需要的朋友可以参考下
2018-05-05
JavaScript函数式编程示例分析
函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果
2022-10-10
javascript getElementsByTagName
DC大神为早期不支持getElementsByTagName的浏览器写的hack，当然与原生的不能同日而言，原生的用到缓存机制呢。
2011-01-01