注:以下代码中涉及到的单词说明: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实现这一功能。 首先,我们要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素定义,`<tr>`表示行,`<th>`表示表头,`<td>`表示单元格。我们...
JavaScript表格技术在网页开发中扮演着重要角色,尤其是在数据展示和操作方面。标题"javascript 表格列可以拖"指的是JavaScript实现的一种功能,允许用户通过拖动来调整表格列的宽度,以适应不同数据量和用户偏好。...
以下是一些关于JavaScript表格类特效的重要知识点: 1. **DOM操作**:在JavaScript中,Document Object Model(DOM)是网页内容的结构化表示,通过DOM我们可以对表格进行添加、删除、修改单元格或行等操作。例如,`...
在JavaScript中,动态操作表格是一项常见的任务,尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题,包括如何添加、删除、选择表格以及兼容性问题。 首先,让我们从添加表格开始。在HTML中,表格由`<table>`...
此外,还可以利用提供的API和事件来扩展和控制表格的行为。 总之,JavaScript DataTables 提供了一套完整的解决方案,用于在网页上创建功能强大且易用的数据展示表格,无论是在后台处理还是前端展示,都能满足...
### JavaScript操作表格知识点详解 #### 一、创建表格 在给定的内容中,我们首先看到了一个简单的示例,展示了如何使用JavaScript动态创建一个表格。这个过程主要包括以下几个步骤: 1. **获取容器元素**:通过`...
在探讨“javascript表格操作”这一主题时,我们深入解析如何使用JavaScript来动态地创建、修改和操作HTML表格。以下是从给定的代码片段中提取的关键知识点: ### 动态插入行与删除行 #### 插入行:`insertRow()` -...
### JavaScript轻松控制表格列样式的脚本代码 #### 概述 在Web开发中,表格是一种常见的用于展示数据的方式。为了提升用户体验,开发者往往需要对表格的样式进行动态控制,以便根据不同的场景来改变表格的外观。...
在“Javascript表格高级操作”这个主题中,我们将深入探讨如何实现一系列高级功能,包括动态创建表格、跨浏览器兼容性、间隔色设定、鼠标悬停高亮、编辑与删除功能以及全选、全清和反选操作。这些功能都是为了提升...
- 滚动条:JavaScript可以控制页面滚动,如创建平滑滚动效果,或者自定义滚动条样式。 - 动态加载:通过Ajax技术,实现页面内容的异步加载,提高用户体验。 - 背景动画:改变背景颜色、图像或视频,实现动态背景...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中,经常需要通过JavaScript来动态地创建或更新HTML元素,其中就包括表格(`<table>`)。本文将详细介绍在JavaScript中动态创建表格的三种常见方法,并对每...
本文将深入探讨如何使用JavaScript来创建可变化、可编辑的表格,以实现更丰富的用户界面。 首先,我们要明白HTML表格的基本结构,通常由`<table>`, `<tr>`, `<td>`和`<th>`等元素组成。JavaScript可以通过操作DOM...
"表格编辑css美化及javascript"的主题涉及到如何利用这些技术来创建交互式、美观的表格,尤其适用于后台管理系统。 HTML5是超文本标记语言的最新版本,它为网页开发引入了许多新的元素和API,提供了更好的结构化和...
总的来说,JavaScript表格高亮选择特效是提高网页交互性的有效手段,它利用JavaScript的事件处理和CSS样式控制,为用户提供直观的反馈,使得数据操作更加便捷。对于前端开发者来说,理解和掌握这种技术有助于提升...
本项目名为“php与JavaScript表格高模仿计算机”,旨在为学习PHP和JavaScript的学生提供一个实战案例,通过创建一个高度仿真的计算机界面,深入理解这两种语言的交互方式。 首先,我们来探讨JavaScript。JavaScript...
在本示例中,"JavaScript实现表格动画渐变特效"是通过JavaScript代码为HTML表格添加了动态效果,使得用户在点击表格表头时,表格内容能够以线条方框动画的形式呈现,提供了一种吸引用户的视觉体验。 首先,我们需要...
Handsontable是一款强大的JavaScript库,专门用于在Web应用中创建类似于Microsoft Excel的电子表格功能。它采用HTML5技术,能够无缝地与现代浏览器兼容,提供高效、可定制的数据输入和处理体验。这款开源工具旨在为...
在JavaScript的世界里,表格操作是网页交互中常见且重要的任务,尤其在数据展示和管理时。本主题将深入探讨如何实现“Javascript高级表格操作”,包括动态创建表格、间隔行颜色、鼠标悬停高亮、编辑与删除功能、选择...
本教程将重点讲解如何实现"javascript表格常用操作",包括"表头排序"、"表头固定"、"列隐藏"、"行隐藏"以及"悬浮变色"等功能。这些功能可以极大地提升用户体验,使得数据浏览和管理更加便捷。 首先,我们来谈谈...
JavaScript 操作表格是网页开发中的常见任务,尤其在创建交互式数据展示或处理用户输入时。这个文档示例提供了一个简单的表格编辑器,允许用户通过按钮执行常见的表格操作,如添加、删除行和单元格,以及移动单元格...