版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34928644/article/details/80972234
共同的css(table.css):
table{
border: #249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border: #249bdb 1px solid;
padding: 5px;
}
table th{
border: #249bdb 1px solid;
padding: 5px;
background-color:rgb(180,180,180);
}
.one{
background-color:#ff80ff;
}
.two{
background-color: #ffff80;
}
.over{
background-color: #fff;
/*font-size:20px; */
}
采用节点的方式对table进行操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--有关表格的演示</title>
<style type="text/css">
@import url(table.css);
</style>
<!--
<link rel="stylesheet" type="text/css" href="table.css" />
-->
<script type="text/javascript">
/*
* <table>
* <tr> <td>1-1</td> </tr>
* </table>
*/
//用创建普通节点的方式实现
function createTable(){
//分别创建table,tbody,tr,td节点
var oTableNode = document.createElement("table");
var oTbodyNode = document.createElement("tbody");
var oTrNode = document.createElement("tr");
var oTdNode = document.createElement("td");
//把table,tbody,tr,td节点组装成一棵子树
oTableNode.appendChild(oTbodyNode);
oTbodyNode.appendChild(oTrNode);
oTrNode.appendChild(oTdNode);
oTdNode.innerHTML="<b>单元格1-1</b>"
//把子树添加成div1的孩子
document.getElementById("div1").appendChild(oTableNode);
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable();"> <br/>
<hr/>
<div id="div1"></div>
</body>
</html>采用table对象特有的方法进行table操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--有关表格的演示</title>
<link rel="stylesheet" type="text/css" href="table.css" />
<script type="text/javascript">
/*
* <table>
* <tr> <td>1-1</td> </tr>
* </table>
*
* table对象中的函数:
* createCaption() 为表格创建一个 caption 元素。
createTFoot() 在表格中创建一个空的 tFoot 元素。
createTHead() 在表格中创建一个空的 tHead 元素。
deleteCaption() 从表格删除 caption 元素以及其内容。
deleteRow() 从表格删除一行。
deleteTFoot() 从表格删除 tFoot 元素及其内容。
deleteTHead() 从表格删除 tHead 元素及其内容。
insertRow() 在表格中插入一个新行。
tr对象中的函数:
deleteCell() 从表格行及 cells 集合中删除指定单元格(td)。
insertCell() 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
*/
//用dom提供的专用于表格操作的函数来实现
function createTable1(){
var oTableNode = document.createElement("table");
var oTrNode = oTableNode.insertRow(); //创建并添加到oTableNode中
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="<b>单元格1-1</b>";
//把子树添加成div1的孩子
document.getElementById("div1").appendChild(oTableNode);
}
function createTable(){
var oTableNode = document.createElement("table");
for(var i=1; i<=5; i++){
var oTrNode = oTableNode.insertRow(); //创建并添加到oTableNode中
for(var j=1; j<=6; j++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="<b>单元格"+i+"-"+j+"</b>";
}
}
//把子树添加成div1的孩子
document.getElementById("div1").appendChild(oTableNode);
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable();"> <br/>
<hr/>
<div id="div1"></div>
</body>
</html>动态生成和删除表格
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--有关表格的演示</title>
<link rel="stylesheet" type="text/css" href="table.css" />
<script type="text/javascript">
function createTable(){
//获取用户输入的行数和列数
var rowNum=parseInt(document.getElementsByName("rowNum")[0].value);
if(isNaN(rowNum)){
alert("行数必须是整数");
return;
}
var colNum=parseInt(document.getElementsByName("colNum")[0].value);
if(isNaN(colNum)){
alert("列数必须是整数");
return;
}
var oTableNode = document.createElement("table");
//为表格添加id属性，两种方法
//法1: oTableNode.id="tab1"; //如果是一般对象的普通属性如obj的name属性，设置时用obj.name=XXX, 读取时要用obj.name
//法2:
oTableNode.setAttribute("id","tab1"); //如果是一般对象的普通属性如obj的name属性，设置时用obj.setAttribute("name",XXX), 读取时要用obj.getAttribute("name")
for(var i=1; i<=rowNum; i++){
var oTrNode = oTableNode.insertRow(); //创建并添加到oTableNode中
for(var j=1; j<=colNum; j++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="<b>单元格"+i+"-"+j+"</b>";
}
}
//把子树添加成div1的孩子
document.getElementById("div1").appendChild(oTableNode);
}
function delRow(){
//获取表格
var oTableNode = document.getElementById("tab1");
if(oTableNode==null){
alert("表格不存在");
return;
}
//alert("表格在在在...");
//获取用户输入的行号
var rowNum=parseInt(document.getElementsByName("rowNum2")[0].value);
if(isNaN(rowNum)){
alert("行数必须是整数");
return;
}
if(rowNum<1 || rowNum>oTableNode.rows.length){
alert("不存在要删除的行号!");
return;
}
oTableNode.deleteRow(rowNum-1);
if(oTableNode.rows.length==0){
oTableNode.parentNode.removeChild(oTableNode);
}
}
function delCol(){
//获取表格
var oTableNode = document.getElementById("tab1");
if(oTableNode==null){
alert("表格不存在");
return;
}
//alert("表格在在在...");
//获取用户输入的列号
var colNum=parseInt(document.getElementsByName("colNum2")[0].value);
if(isNaN(colNum)){
alert("列数必须是整数");
return;
}
if(colNum<1 || colNum>oTableNode.rows[0].cells.length){
alert("不存在要删除的列号!");
return;
}
for(var i=0; i<oTableNode.rows.length; i++){
oTableNode.rows[i].deleteCell(colNum-1);
}
if(oTableNode.rows[0].cells.length==0){
oTableNode.parentNode.removeChild(oTableNode);
}
}
</script>
</head>
<body>
<h3>表格添加</h3>
行:<input type="text" name="rowNum" />
列:<input type="text" name="colNum" />
<input type="button" value="创建表格" onclick="createTable();"> <br/>
<h3>表格删除</h3>
行号:<input type="text" name="rowNum2" /> <input type="button" value="删除行" onclick="delRow();"> <br/>
列号:<input type="text" name="colNum2" /> <input type="button" value="删除列" onclick="delCol();"> <br/>
<hr/>
<div id="div1"></div>
</body>
</html>table对象实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--有关表格的演示</title>
<link rel="stylesheet" type="text/css" href="table.css" />
<script type="text/javascript">
var flag = true; //第一次点击为升序
function trColor(){
//给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
var oTableNode = document.getElementById("tbData");
var collTrNodes = oTableNode.rows; //获得所有行集合
//遍历所有行(除第一行的表头外)，分别设置类样式one,two
for(var x=1; x<collTrNodes.length; x++){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
}
}
function trEvent(){
//给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
var oTableNode = document.getElementById("tbData");
var collTrNodes = oTableNode.rows; //获得所有行集合
//遍历所有行(除第一行的表头外)，分别设置类样式one,two
for(var x=1; x<collTrNodes.length; x++){
var oldName;
collTrNodes[x].onmouseover=function(){
oldName = this.className;
this.className="over";
};
collTrNodes[x].onmouseout=function(){
this.className=oldName;
};
}
}
onload = function(){
trColor(); //这种方式可以传参
trEvent();
}
/*
* 表格排序的套路:
* 1)把要排序的数据(除表头外的那些"行对象") 放到一个临时容器中--数组
* 2)对临时容器中的数据进行排序
* 3)把排序后的临时容器中的行对象依次添加到 表格中
*/
function sortTable(oANode){
var oTableNode = document.getElementById("tbData");
var collTrNodes = oTableNode.rows; //获得所有行集合
//1)把要排序的数据(第表头外的那些行对象) 放到一个临时容器中
var trArr=[];//临时容器
for(var x=1; x<collTrNodes.length; x++){
trArr[x-1] = collTrNodes[x];
}
//2)对临时容器中的数据进行排序
mySort(trArr);
//3)把排序后的临时容器中的行对象依次添加到 表格中
if(flag){//升序时顺着加
for(var x=0;x<trArr.length;x++){
trArr[x].parentNode.appendChild(trArr[x]);//找父亲加孩子，跨浏览器支持
}
oANode.innerHTML="年龄↑";
}else{//倒序时反着加
for(var x=trArr.length-1; x>=0; x--){
trArr[x].parentNode.appendChild(trArr[x]);//找父亲加孩子，跨浏览器支持
}
oANode.innerHTML="年龄↓";
}
flag =!flag; //切换一下
//更新一下行背景间隔显示---重新设置一下
trColor();
}
function mySort(arr){//每个元素是行对象
for(var x=0; x<arr.length-1; x++){
for(var y=x+1; y<arr.length; y++){
if(parseInt(arr[x].cells[1].innerText)> parseInt( arr[y].cells[1].innerText) ){//比较“年龄”
//整行交换，即交换行对象
var t = arr[x];
arr[x] = arr[y];
arr[y] = t;
}
}
}
}
</script>
</head>
<body>
<h3>表格排序</h3>
<table id="tbData">
<tr>
<th>姓名</th>
<th> <a href="javascript:void(0);" onclick="sortTable(this);">年龄</a> </th>
<th>地址</th>
</tr>
<!--过度版，实现鼠标悬停背景高亮显示，用HTML的方式先测试一下
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>张三</td>
<td>22</td>
<td>湖南</td>
</tr>
<tr onmouseover="over(this);" onmouseout="out(this);">
<td>Jack</td>
<td>21</td>
<td>浙江</td>
</tr>
-->
<tr>
<td>张三</td>
<td>22</td>
<td>湖南</td>
</tr>
<tr>
<td>Jack</td>
<td>21</td>
<td>浙江</td>
</tr>
<tr>
<td>Tom</td>
<td>25</td>
<td>江苏</td>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>湖南</td>
</tr>
<tr>
<td>Jack</td>
<td>20</td>
<td>浙江</td>
</tr>
<tr>
<td>张飞</td>
<td>18</td>
<td>湖南</td>
</tr>
<tr>
<td>Tom</td>
<td>25</td>
<td>江苏</td>
</tr>
<tr>
<td>Mike</td>
<td>5</td>
<td>湖南</td>
</tr>
</table>
</body>
</html>