Javascript-网页编程-DHTML-表格创建/删除/设置/排序
2016-07-17 11:07
609 查看
、对表格的一些操作（创建，删除，设置颜色，排序等）
1、创建表格1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强
2）利用table中的现有的功能实现的
注：
1、表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体，<tbody>下面才是<tr>
2、如果<table>和<tr>之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点为文本节点，nodeName:"#text"第二个是tbody
3、<tbody>和#text节点是兄弟关系
只要有空白符出现，皆算一个节点
[java] view
plain copy
<html>
<head>
<title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table {
border:#ff80ff;
width:600px;
border-collapse:collapse;
}
table td{
border:#0000ff 1px solid;
padding:5px;
}
</style>
<script type="text/javascript">
function createTable(){
var oTableNode = document.createElement("table");//创建表格对象
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格中的内容";
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
function createTable2(){
var oTableNode = document.createElement("table");//创建表格对象
//多行多列的表格,如5*6
for(var x=1;x<=5;x++){
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
for(var y=1;y<=8;y++){
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//用户自定义行号与列号的方式创建表格
function createTable3(){
var oTableNode = document.createElement("table");//创建表格对象
//给表格动态地添加属性(id)
//法1
//oTableNode.id = "tableId";//变量方式
//法2
oTableNode.setAttribute("id","tableId");//函数的方式
//由用户指定行数与列数的表格
//获取用户输入的行数与列数
var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);
var colNum =parseInt( document.getElementsByName("colNum")[0].value);
//健壮性防护
if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){
alert("行号和列号必须是大于0的整数");
return;
}
for(var x=1;x<=rowNum;x++){
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
for(var y=1;y<=colNum;y++){
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//删除指定的行
function delRow(){
//由指定的id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在!");
return;
}
//删除行的处理代码
//获取用户输入的行号
var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);
//alert(delRowNum);
//行号的健壮性防护
if(isNaN(delRowNum) ){
alert("行号必须是数字");
return;
}
if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){
alert("该行不存在!");
return;
}
//删除行
oTableNode.deleteRow(delRowNum-1);
}
//删除指定的列
function delCol(){
//由指定的id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在!");
return;
}
//删除列的处理代码
//获取用户输入的列号
var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);
//alert(delColNum);
//行号的健壮性防护
if(isNaN(delColNum) ){
alert("列号必须是数字");
return;
}
if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){
alert("该列不存在!");
return;
}
//删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
for(var x=0; x<oTableNode.rows.length;x++){
oTableNode.rows[x].deleteCell( delColNum-1 );
}
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable()" />
<input type="button" value="创建多行多列表格" onclick="createTable2()" />
<br/><br/><br/>
<!--添加-->
行数:<input type="text" name="rowNum"/>
列数:<input type="text" name="colNum"/>
<input type="button" value="创建表格" onclick="createTable3()" />
<br/><br/><br/>
<!--删除-->
<h3>删除前面由用户指定行列号方式创建的表格</h3> <br/>
行号:<input type="text" name="delRowNum"/>
<input type="button" value="删除行" onclick="delRow()" />
列号:<input type="text" name="delColNum"/>
<input type="button" value="删除列" onclick="delCol()" />
<hr/>
<div></div>
</body>
</html>
效果：
3、设置颜色和排序
1）颜色：通过奇偶行号，设置不同的两种颜色，且鼠标放上后变为第三种颜色，离开后恢复原来颜色
2）排序：通过点击表格中的年龄项，表格中的内容通过年龄的大小，进行排序，且年龄项做出相应的变化
[java] view
plain copy
<html>
<head>
<title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url(table.css);
.one{
background:#80ff00;
}
.two{
background:rgb(210,0,0);
}
.over{
background-color:#ffff00;
}
a{
text-decoration:none;
}
</style>
<script type="text/javascript">
function trColor(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
for(var x=1;x<arrTrs.length; x++){
if(x%2==1){
arrTrs[x].className="one";
}else{
arrTrs[x].className="two";
}
//为每一行动态注册事件处理方法
var oldClassName;
arrTrs[x].onmouseover=function(){
oldClassName=this.className;
this.className="over";
};
arrTrs[x].onmouseout=function(){
this.className=oldClassName;
};
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。但如果把该段代码放在<table>之后则有效果，放表格内也可以，<span style="font-family: Arial, Helvetica, sans-serif;">但<script>标签要包裹其一起放过去</span><span style="font-family: Arial, Helvetica, sans-serif;">)，而且只能执行这一个方法</span>
onload = function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行，而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
</script>
<script type="text/javascript">
/*
function over(trNode){
trNode.className="over";
}
*/
var flag = true;
function sortTable(aNode){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;
//思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中
//放到新容器arrTrs2中
var arrTrs2=[];
for(var x=1;x<arrTrs.length;x++){
arrTrs2[x-1] = arrTrs[x];
}
//对容器arrTrs2中的元素进行排序
mySort(arrTrs2);
//把排序后的行对象重新加到表格中
if(flag){
for(var x=0;x<arrTrs2.length;x++){
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
}
aNode.innerHTML="年龄↓";
}else{
for(var x=arrTrs2.length-1;x>=0;x--){
arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
}
aNode.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>
<table id="dataTable">
<tr>
<th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th> <th>地址</th>
</tr>
<tr>
<td>张三</td> <td>22</td> <td>湖南长沙</td>
</tr>
<tr>
<td>李四</td> <td>33</td> <td>湖南长沙</td>
</tr>
<tr>
<td>王五</td> <td>21</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>20</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>43</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>53</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>35</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>13</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>30</td> <td>湖南长沙</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Web布局连载——两栏固定布局（五）
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 最后一次说说闭包
- Ajax
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- Powershell 创建炫丽美观的Html报表
- HTML中的script标签研究
- 对一个分号引发的错误研究