DOM--有关表格的演示
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; */
}
版本1
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(table.css);
</style>
<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>
版本2
table对象中的函数:
createCaption() 为表格创建一个 caption 元素。
createTFoot() 在表格中创建一个空的 tFoot 元素。
createTHead() 在表格中创建一个空的 tHead 元素。
deleteCaption() 从表格删除 caption 元素以及其内容。
deleteRow() 从表格删除一行。
deleteTFoot() 从表格删除 tFoot 元素及其内容。
deleteTHead() 从表格删除 tHead 元素及其内容。
insertRow() 在表格中插入一个新行。
tr对象中的函数:
deleteCell() 从表格行及 cells 集合中删除指定单元格(td)。
insertCell() 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(table.css);
</style>
<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(){
//分别创建table,tbody,tr,td节点
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 createTable2(){
var oTableNode = document.createElement("table");
for (var i = 0; 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="createTable2();">
<br/>
<hr/>
<div id="div1">
</div>
</body>
</html>
版本3
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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");
for(var i=0;i<=rowNum;i++){
var oTrNode=oTableNode.insertRow();
for(var j=1;j<=colNum;j++){
var oTdNode=oTrNode.insertCell();
oTdNode.innerHTML="<b>单元格"+i+"-"+j+"</b>";
}
}
//把子树添加成div1的孩子
document.getElementById('div1').appendChild(oTableNode);
}
</script>
</head>
<body>
行:<input type="text" name="rowNum" />
列:<input type="text" name="colNum" />
<input type="button" value="创建表格" onclick="createTable();">
<br/>
<hr/>
<div id="div1">
</div>
</body>
</html>
版本4
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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=0;i<=rowNum;i++){
var oTrNode=oTableNode.insertRow();
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;
}
//获取用户输入的行号
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;
}
//获取用户输入的列数
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>
版本5
给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
注意：给行对象collTrNodes[x]动态注册事件
法1 = 这一段再加上后面的两个函数:over(),out() 给每一行(行对象collTrNodes[x])动态注册事件；
collTrNodes[x].onmouseover=function(){
over(this);
};
collTrNodes[x].onmouseout=function(){
out(this);
};法2：下面这种方式ok
var oldName;
collTrNodes[x].onmouseover=function(){
oldName=this.className;
this.className="over"
}
collTrNodes[x].onmouseout=function(){
this.className=oldName;
};下面这种方式挂，因为这是事件注册，相当于填充Java中的方法区代码。事件发生时来原样拷贝这段代码去执行，那时collTrNodes[x]对象已经变样了。
collTrNodes[x].onmouseover=function(){
oldName = collTrNodes[x].className;
collTrNodes[x].className="over";
};
collTrNodes[x].onmouseout=function(){
collTrNodes[x].className=oldName;
};
onload 加载有三种方式：
<head>
<script>
trColor(); //WA不行，因为此时页面表格还未加载
onload = trColor(); //WA还不行，因为这是执行
方式1 onload = trColor; //这个行，因为是注册事件响应
//这个也行
方式2 onload = function(){
trColor(); //这种方式可以传参
}
</script>
</head>
<html>
<body>
</body>
方式3<script type="text/javascript">
trColor();
</script>
</html><!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="table.css" />
<script type="text/javascript">
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";
}
//////////给行对象collTrNodes[x]动态注册事件/////////////
//法1 = 这一段再加上后面的两个函数:over(),out()
//给每一行(行对象collTrNodes[x])动态注册事件
/*collTrNodes[x].onmouseover=function(){
over(this);
};
collTrNodes[x].onmouseout=function(){
out(this);
};
*/
//法2
var oldName;
collTrNodes[x].onmouseover=function(){
oldName=this.className;
this.className="over"
}
collTrNodes[x].onmouseout=function(){
this.className=oldName;
};
/* WA 下面的方式不行，因为这是事件注册，相当于填充Java中的方法区代码。事件发生时来原样拷贝这段代码去执行，那时collTrNodes[x]对象已经变样了
collTrNodes[x].onmouseover=function(){
oldName = collTrNodes[x].className;
collTrNodes[x].className="over";
};
collTrNodes[x].onmouseout=function(){
collTrNodes[x].className=oldName;
};
*/
}
}
// trColor(); //WA不行，因为此时页面表格还未加载
// onload = trColor(); //WA还不行，因为这是执行
// onload = trColor; //这个行，因为是注册事件响应
//这个也行
onload = function(){
trColor(); //这种方式可以传参
}
//下面的方式只能在页面加载完毕时执行且只执行这一次。本例中，该方式不合适，因为我们希望表格排序后还能重新进行行间隔显示设置
/*
onload=function(){
//给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
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";
}
}
};
*/
//var oldClass;
// function over(oTrNode){
// oldClass = oTrNode.className;
// oTrNode.className="over";
// }
// function out(oTrNode){
// oTrNode.className=oldClass;
// }
</script>
</head>
<body>
<h3>表格行背景色间隔显示</h3>
<table id="tbData">
<tr>
<th>姓名</th>
<th>年龄</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>Tom</td>
<td>25</td>
<td>江苏</td>
</tr>
</table>
</body>
<!--
<script type="text/javascript">
trColor();
</script>
-->
</html>
版本6
给表格的奇数行与偶数行分别设置不同的背景色---用样式来做，显示风格易扩展
表格排序的套路:
* 1)把要排序的数据(除表头外的那些"行对象") 放到一个临时容器中--数组
* 2)对临时容器中的数据进行排序
* 3)把排序后的临时容器中的行对象依次添加到 表格中
<!DOCTYPE html>
<html>
<head>
<title>DOM--有关表格的演示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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 collTrNode=oTableNode.rows//获取所有行集合
//1)把要排序的数据(第表头外的那些行对象) 放到一个临时容器中
var trarr=[];//临时容器
for(var i=1 ; i<collTrNode.length ;i++){
trarr[i-1]=collTrNode[i];
}
//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 temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
</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>Tom</td>
<td>25</td>
<td>江苏</td>
</tr>
<tr>
<td>Mike</td>
<td>5</td>
<td>湖南</td>
</tr>
</table>
</body>
<!--
<script type="text/javascript">
trColor();
</script>
-->
</html>