`
红尘默岩
  • 浏览: 77883 次
  • 性别: Icon_minigender_1
  • 来自: 福建福州
社区版块
存档分类
最新评论

JavaScript表格控制

阅读更多

注:以下代码中涉及到的单词说明:tableID为指定表格ID;trID为指定行ID;tdID为指定单元格ID

---------------------------------------------------

 

1、获取表格/TR/TD对象:

 

var tableObj = document.getElementById('tableID');
var trObj = document.getElementById('trID');
var tdObj = document.getElementById('tdID');

 

 

2、获取/设置表格TD中的内容:

 

//获取/设置表格ID指定单元格的内容
var tdValue = document.getElementById("tdID").innerHTML;
document.getElementById("tdID").innerHTML = "设置的内容";

//获取/设置表格第一行第三列单元格的内容
var tdValue = document.getElementById("tableID").rows[0].cells[2].innerHTML;
document.getElementById("tableID").rows[0].cells[2].innerHTML = "设置的内容";

 

 

3、获取表格总的行数:

 

var cellsLen = document.getElementById('tableID').rows.length;

 

 

4、获取表格指定列的列数:

 

//获取表格第一行总的列数
var rowsLen = document.getElementById('tableID').rows.item(0).cells.length;

 

 

5、获取单击单元格对应的行号/列号:

 

//获取当前单击单元格所对应的行号
var rowsNum = this.parentNode.parentNode.rowIndex;

//获取当前单击单元格所对应的列号
var cellsNum = this.parentNode.parentNode.cellIndex;

 

 

6、设置表格的样式:

 

//只显示行边框
document.getElementById('tableID').rules = "rows";

//只显示列边框
document.getElementById('tableID').rules = "cols";
//只显示上边框
document.getElementById('tableID').frame = "above";
//只显示下边框
document.getElementById('tableID').frame = "below";
//改变表格宽度
document.getElementById('tableID').width = 具体宽度值(如100);
//改变表格高度
document.getElementById('tableID').height = 具体高度值(如200)
//改变单元格中内容与边框之间的间隔大小
document.getElementById('tableID').cellPadding = 具体间隔值(如15);
//改变单元格中内外边框的大小
document.getElementById('tableID').cellSpacing = 具体大小值(如15);
//改变单元格中外边框的大小
document.getElementById('tableID').border = 具体大小值(如15);

//设置第一行第三列单元格的颜色
document.getElementById("tableID").rows[0].cells[2].bgColor = "#fff68f";

//表格内字体粗体显示
document.getElementById('tableID').style.fontWeight = "bold";
//表格第一行内字体粗体显示
document.getElementById('tableID').rows[0].style.fontWeight = "bold";
//表格第一行内字体正常粗细显示
document.getElementById('tableID').rows[0].style.fontWeight = "normal";

//水平右对齐表格第一行单元格的内容
document.getElementById('tableID').rows.align = "right";

//垂直顶部对齐表格第一行单元格的内容
document.getElementById('tableID').rows.vAlign = "top";

//水平居中对齐表格第一行第一列单元格的内容
document.getElementById('tableID').rows[0].cells[0].align = "center";

//垂直底部对齐表格第一行第一列单元格的内容
document.getElementById('tableID').rows[0].cells[0].vAlign = "bottom";

 

 

7、创建/删除表格标题:

 

//为表格添加标题
document.getElementById('tableID').createCaption().innerHTML = "<b>表格标题内容</b>"

//删除表格标题
document.getElementById('tableID').deleteCaption();

 

 

8、创建表格行/单元格

 

//在表格第一行第一列处插入一个单元格
var rowsObj = document.getElementById('tableID').rows[0].insertCell(0);
rowsObj.innerHTML = "新插入单元格的内容";

//在表格第二行处插入一行,并插入一个单元格
var rowsObj = document.getElementById('tableID').insertRow(1);
var cellsObj = rowsObj .insertCell(0);
cellsObj.innerHTML = "新插入单元格的内容";

 

9、删除表格指定行/单元格:

 

//删除表格第一行
document.getElementById('tableID').deleteRow(0);

//删除表格第一行第一列的单元格
document.getElementById('tableID').rows[0].deleteCell(0);

 

 

10、合并单元格

 

//跨列合并单元格(表格第一行1、2、3格合并)
document.getElementById('tableID').rows[0].cells[0].colSpan = "3";

//跨行合并单元格(表格第一列,1、2、3行的单元格合并)
document.getElementById('tableID').rows[0].cells[0].rowSpan = "3";

以上合并方式,实际效果中,或发现有多余的单元格;
所以,在合并之前需要先删除被占用的单元格,再进行合并,就不会出现这种问题;
删除时,是一个个单元格的删除,所以切记从后往前删除,从下往上删除,否则将删错单元格。
完整合并示例:
//先删除第一行第三个单元格
document.getElementById('tableID').rows[0].deleteCell(2);
//再删除第一行第二个单元格
document.getElementById('tableID').rows[0].deleteCell(1);
//以保留第一行第一个单元格,进行跨列合并3格单元格,即进行扩大至3格
document.getElementById('tableID').rows[0].cells[0].colSpan="3";

//先删除第三行第一个单元格
document.getElementById('myTable').rows[2].deleteCell(0);
//再删除第二行第一个单元格
document.getElementById('myTable').rows[1].deleteCell(0);
//以保留第一行第一个单元格,进行跨行合并3格单元格,即进行扩大至3格
document.getElementById('myTable').rows[0].cells[0].rowSpan="3";

附上一个可以做测试的表格代码:
	<table border="1" id="tableID">
		<tr>
			<td>0.0</td><td>0.1</td><td>0.2</td><td>0.3</td><td>0.4</td>
		</tr>
		<tr>
			<td>1.0</td><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td>
		</tr>
		<tr>
			<td>2.0</td><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td>
		</tr>
		<tr>
			<td>3.0</td><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td>
		</tr>
		<tr>
			<td>4.0</td><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td>
		</tr>
	</table>
分享到:
评论

相关推荐

    JavaScript控制表格换色

    这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 首先,我们要理解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素定义,`&lt;tr&gt;`表示行,`&lt;th&gt;`表示表头,`&lt;td&gt;`表示单元格。我们...

    javascript 表格列可以拖

    JavaScript表格技术在网页开发中扮演着重要角色,尤其是在数据展示和操作方面。标题"javascript 表格列可以拖"指的是JavaScript实现的一种功能,允许用户通过拖动来调整表格列的宽度,以适应不同数据量和用户偏好。...

    JavaScript特效(表格类)

    以下是一些关于JavaScript表格类特效的重要知识点: 1. **DOM操作**:在JavaScript中,Document Object Model(DOM)是网页内容的结构化表示,通过DOM我们可以对表格进行添加、删除、修改单元格或行等操作。例如,`...

    javascript动态操作表格

    在JavaScript中,动态操作表格是一项常见的任务,尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题,包括如何添加、删除、选择表格以及兼容性问题。 首先,让我们从添加表格开始。在HTML中,表格由`&lt;table&gt;`...

    Javascript DataTables 表格控件

    此外,还可以利用提供的API和事件来扩展和控制表格的行为。 总之,JavaScript DataTables 提供了一套完整的解决方案,用于在网页上创建功能强大且易用的数据展示表格,无论是在后台处理还是前端展示,都能满足...

    JavaScript操作表格

    ### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...

    javascript 表格操作

    在探讨“javascript表格操作”这一主题时,我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点: ### 动态插入行与删除行 #### 插入行:`insertRow()` -...

    javascript轻松控制表格列样式的脚本代码.docx

    ### JavaScript轻松控制表格列样式的脚本代码 #### 概述 在Web开发中,表格是一种常见的用于展示数据的方式。为了提升用户体验,开发者往往需要对表格的样式进行动态控制,以便根据不同的场景来改变表格的外观。...

    Javascript表格高级操作

    在“Javascript表格高级操作”这个主题中,我们将深入探讨如何实现一系列高级功能,包括动态创建表格、跨浏览器兼容性、间隔色设定、鼠标悬停高亮、编辑与删除功能以及全选、全清和反选操作。这些功能都是为了提升...

    JavaScript的各种页面,表格,窗口,按钮,链接等特效

    - 滚动条:JavaScript可以控制页面滚动,如创建平滑滚动效果,或者自定义滚动条样式。 - 动态加载:通过Ajax技术,实现页面内容的异步加载,提高用户体验。 - 背景动画:改变背景颜色、图像或视频,实现动态背景...

    javascript下动态创建表格的三种方式

    ### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`&lt;table&gt;`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...

    使用JavaScript制作网页可变化表格

    本文将深入探讨如何使用JavaScript来创建可变化、可编辑的表格,以实现更丰富的用户界面。 首先,我们要明白HTML表格的基本结构,通常由`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`和`&lt;th&gt;`等元素组成。JavaScript可以通过操作DOM...

    表格编辑css美化及javascript

    "表格编辑css美化及javascript"的主题涉及到如何利用这些技术来创建交互式、美观的表格,尤其适用于后台管理系统。 HTML5是超文本标记语言的最新版本,它为网页开发引入了许多新的元素和API,提供了更好的结构化和...

    JavaScript表格高亮选择特效.zip

    总的来说,JavaScript表格高亮选择特效是提高网页交互性的有效手段,它利用JavaScript的事件处理和CSS样式控制,为用户提供直观的反馈,使得数据操作更加便捷。对于前端开发者来说,理解和掌握这种技术有助于提升...

    php与JavaScript表格高模仿计算机

    本项目名为“php与JavaScript表格高模仿计算机”,旨在为学习PHP和JavaScript的学生提供一个实战案例,通过创建一个高度仿真的计算机界面,深入理解这两种语言的交互方式。 首先,我们来探讨JavaScript。JavaScript...

    JavaScript实现表格动画渐变特效.rar

    在本示例中,"JavaScript实现表格动画渐变特效"是通过JavaScript代码为HTML表格添加了动态效果,使得用户在点击表格表头时,表格内容能够以线条方框动画的形式呈现,提供了一种吸引用户的视觉体验。 首先,我们需要...

    Handsontable一个JavaScriptHTML5开发的电子表格

    Handsontable是一款强大的JavaScript库,专门用于在Web应用中创建类似于Microsoft Excel的电子表格功能。它采用HTML5技术,能够无缝地与现代浏览器兼容,提供高效、可定制的数据输入和处理体验。这款开源工具旨在为...

    Javascript高级表格操作

    在JavaScript的世界里,表格操作是网页交互中常见且重要的任务,尤其在数据展示和管理时。本主题将深入探讨如何实现“Javascript高级表格操作”,包括动态创建表格、间隔行颜色、鼠标悬停高亮、编辑与删除功能、选择...

    javascript表格常用操作 表头排序 表头固定 列隐藏 行隐藏

    本教程将重点讲解如何实现"javascript表格常用操作",包括"表头排序"、"表头固定"、"列隐藏"、"行隐藏"以及"悬浮变色"等功能。这些功能可以极大地提升用户体验,使得数据浏览和管理更加便捷。 首先,我们来谈谈...

    javascript操作表格.doc

    JavaScript 操作表格是网页开发中的常见任务,尤其在创建交互式数据展示或处理用户输入时。这个文档示例提供了一个简单的表格编辑器,允许用户通过按钮执行常见的表格操作,如添加、删除行和单元格,以及移动单元格...

Global site tag (gtag.js) - Google Analytics