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>