JS表格的学习笔记

最新推荐文章于 2021-06-30 14:36:31 发布

___________超

最新推荐文章于 2021-06-30 14:36:31 发布

阅读量768

点赞数

分类专栏： JavaScript 文章标签： table xhtml javascript html border function

本文链接：https://blog.csdn.net/van416521/article/details/6953297

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<script language="javascript"> 
window.onload = function() {
	var table = document.getElementById('table');														
	//alert(table.caption.innerHTML);                        //table.caption:直接获取caption对象
	//alert(table.tHead);                                    //table:tHead:获取thead对象
	//alert(table.tFoot);                                    //table:tFoot:获取tfoot对象
	//var tbodies = table.tBodies;			  //table.tBodies:获取表格中的tbody对象
	//alert(tbodies.length);				  //获取表格中的tbody的个数
	//var rows = table.rows;				  //table.rows:获取table下的行对象
	//alert(tbodies[0].rows.length);			  //获取第一个tbody下的行数量
	//var firstRow = rows[0];				  //第一行
	//var cells = firstRow.cells			  //cells:一行中单元格的对象	
	//alert(cells[0].innerHTML);			  //单元格的TEXT档													
	//第一种创建caption的方法:用appendChild创建caption的方法,缺点,有caption会在之前创建
	/*var caption = document.createElement("caption");	  
	caption.appendChild(document.createTextNode("新标题"));
	table.insertBefore(caption,table.firstChild);
	*/																				//第二种创建caption的方法:createCaption(),会将原来的caption覆盖
	//caption = table.createCaption();
	//caption.innerHTML="新标题";
																					//用document.createElement创建新的一行
	/*var row = table.insertRow(0);
	var td = document.createElement("td");
	td.innerHTML = "ABC";
	row.appendChild(td);*/																																						//用insertCell新建一行							
	//var cell = row.insertCell(0);
	//cell.innerHTML = "New Cell";
	//cell = row.insertCell(0);
	//cell.innerHTML="FirstCell";
	
	var oneRow = document.getElementById('oneRow');
	//alert(oneRow.rowIndex);                                   //rowIndex:获取table中oneRow那一个的索引
	//alert(oneRow.sectionRowIndex);			     //sectionRowIndex:获取所在tbody中的索引
	//alert(oneRow.cells[2].cellIndex);			     //cellIndex:单元格的索引
	//alert(table.rows[3].rowIndex);			     //3
	/*alert("DeleteCell");				     													row.deleteCell(0);					    //deleteCell:删除单元格
	alert("DeleteRow")
	table.deleteRow(0);				    //deleteRow:删除行
	*/
};




</script> 
</head> 
<body>
  	<h1>表格</h1>
	<table border="1" id="table">
		<caption>标题</caption>
		<thead>
			<tr>
				<td>表头1</td>
				<td>表头2</td>
				<td>表头3</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>数据</td>
				<td>数据</td>
				<td>数据</td>
			</tr>
		</tbody>
		<tbody>
			<tr id="oneRow">
				<td>数据</td>
				<td>数据</td>
				<td>数据</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">表尾</td>
			</tr>
		</tfoot>
	</table>
</body> 
</html>

___________超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS表格的学习笔记

test window.onload = function() { var table = document.getElementById('table'); //alert(table.caption.innerHTML); //table.caption:直接获取caption对象 //alert(
复制链接

扫一扫

专栏目录