JS实现控制表格只显示行边框或者只显示列边框的方法
本文实例讲述了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实现向表格中动态添加行的方法
本文实例讲述了JS实现向表格中动态添加行的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> <script> function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.ins
-
JS实现控制表格行文本对齐的方法
本文实例讲述了JS实现控制表格行文本对齐的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以控制表格内的整行文本向左或者向右对齐 <!DOCTYPE html> <html> <head> <script> function leftAlign() { document.getElementById('header').align="left"; } </script> </head> <body&g
-
JS显示表格内指定行html代码的方法
本文实例讲述了JS显示表格内指定行html代码的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了如何通过表格的rows数组获得指定行的html代码,包含了所有列 <!DOCTYPE html> <html> <head> <script> function showRow() { alert(document.getElementById('myTable').rows[0].innerHTML); } </script> </
-
JS实现从表格中动态删除指定行的方法
本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR
-
JS实现向表格行添加新单元格的方法
本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&
-
JS获取表格内指定单元格html内容的方法
本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;
-
JS实现为表格动态添加标题的方法
本文实例讲述了JS实现为表格动态添加标题的方法.分享给大家供大家参考.具体如下: JS中的表格对象带有一个createCaption方法用于为表格创建标题caption <!DOCTYPE html> <html> <head> <script> function createCaption() { var x=document.getElementById('myTable').createCaption(); x.innerHTML="My t
-
JS实现控制表格只显示行边框或者只显示列边框的方法
本文实例讲述了JS实现控制表格只显示行边框或者只显示列边框的方法.分享给大家供大家参考.具体分析如下: 通过下面的JS代码你可以控制表格只显示行与行之间的分隔线,也可以只显示列与列之间的分隔线,主要用到了表格对象的rules属性 <!DOCTYPE html> <html> <head> <script> function rowRules() { document.getElementById('myTable').rules="rows&quo
-
JS实现控制表格行内容垂直对齐的方法
本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <
-
JS实现控制表格内指定单元格内容对齐的方法
本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> <script> function alignCell() { document.getElementById('td1').align="right"; } </script> </head> <body> &l
-
JS实现控制表格单元格垂直对齐的方法
本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> <script> function valignCell() { var x=document.getElementById('myTable').rows[0].cells; x[0].vAlign="bottom"; } </script>
-
C#控制Excel Sheet使其自适应页宽与列宽的方法
本文实例讲述了C#控制Excel Sheet使其自适应页宽与列宽的方法.分享给大家供大家参考,具体如下: ///// <summary> /// 1.Clear CircleReference /// 2.Set Page to Fit Wide /// 3.Set Column Text fit /// </summary> /// <param name="app"></param> /// <param name="
-
JS控制表格实现一条光线流动分割行的方法
本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit
-
如何用jquery控制表格奇偶行及活动行颜色
虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;
随机推荐
- swift 字符串String的使用方法
- 详解Jquery的事件操作和文档操作
- JS表格组件BootstrapTable行内编辑解决方案x-editable
- js优化针对IE6.0起作用(详细整理)
- 秒用自动关机命令实现定时提醒你该睡觉了
- 详解Spring Boot 使用Java代码创建Bean并注册到Spring中
- python用10行代码实现对黄色图片的检测功能
- JavaScript回调(callback)函数概念自我理解及示例
- C# 反射与dynamic最佳组合示例代码
- MYSQL GROUP BY用法详解
- JavaScript操作 url 中 search 部分方法函数
- 文本文件乱序排列bat实现代码
- CASE表达式实现基于条件逻辑来返回一个值
- C语言 文件操作解析详解及实例代码
- jQuery 使用手册(一)
- 基于JavaScript实现报警器提示音效果
- VPN技术详解
- MUI进行APP混合开发实现下拉刷新和上拉加载 原创
- IntelliJ IDEA 中git的使用图文教程
- python中in在list和dict中查找效率的对比分析