用DOM动态控制表格
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>用DOM动态控制表格</title>
</head>
<body>
<script language="javascript">
counter = 1;
// 插入数据
function insertData()
{
var oStudentsTable = document.getElementById("students");
var oTrHang = oStudentsTable.insertRow(oStudentsTable.rows.length); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("王" + (counter++));
aText[1] = document.createTextNode("B072");
aText[2] = document.createTextNode("女");
aText[3] = document.createTextNode("1025");
aText[4] = document.createTextNode("13663616963");
for(var i=0; i<aText.length; i++)
{
var oTd = oTrHang.insertCell(i); //插入一个单元格
oTd.appendChild(aText[i]);
}
}
// 编辑单元格数据
function editData()
{
var oTable = document.getElementById("students");
oTable.rows[1].cells[0].innerHTML += "Chf";
}
//添加删除数据的列
function insertDeleteCell()
{
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>操作</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<a href='#' onclick='myDeleteRow(this)'>Delete</a>";
}
}
//添加拥有一个输入框的列
function insertInputCell() {
var oTable = document.getElementById("students");
var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length);
oTh.innerHTML = "<font style='font-weight: bold;'>输入</font>";
for(var i=1; i<oTable.rows.length; i++)
{
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "<input type=\"text\" style=\"background:#C0F2F3;margin-left:8px;width:10px;height:10px;\" />"
}
}
//删除行
function myDeleteRow(theDel)
{
theDel.parentNode.parentNode.parentNode.removeChild(theDel.parentNode.parentNode);
}
//删除所有行
function deleteAllRows()
{
var studentsTable = document.getElementById("students");
while(studentsTable.rows.length > 1)
{
studentsTable.deleteRow(studentsTable.rows.length - 1);
}
}
//对表格的行进行排序
function sortByBirthday()
{
var studentsTable = document.getElementById("students");
// 获取所有学生数据行
/**
var studentsRowsData = new Array();
for(var i=1; i<studentsTable.rows.length; i++)
{
// 以这种方式获取表格的所有行，但是通过deleteRow方法删除表格的行，会导致获取的行成为空行<tr></tr>
// studentsRowsData[i-1] = studentsTable.rows[i];
}
**/
var studentsRows = new Array();
for(var i=1; i<studentsTable.rows.length; i++)
{
studentsRows[i-1] = studentsTable.rows[i];
} // ---------- 排序 Begin ----------
for(var i=0; i<studentsRows.length-1; i++)
{
for(var j=i+1; j<studentsRows.length; j++)
{
var iBirth = Number(studentsRows[i].cells[3].firstChild.nodeValue);
var jBirth = Number(studentsRows[j].cells[3].firstChild.nodeValue);
if(iBirth > jBirth)
{
var temp = studentsRows[i];
studentsRows[i] = studentsRows[j];
studentsRows[j] = temp;
}
}
} // ---------- 排序 End ---------- /**
// 删除表格中的所有学生数据行，保留行首
while(studentsTable.rows.length > 1)
{
studentsTable.deleteRow(studentsTable.rows.length - 1);
}
**/ var studentsSortedTable = document.getElementById("students_sorted");
// 先清空存放排序后学生信息的表格
while(studentsSortedTable.rows.length > 1)
{
studentsSortedTable.deleteRow(studentsSortedTable.rows.length - 1);
}
for(var i=0; i<studentsRows.length; i++)
{
var newRow = studentsSortedTable.insertRow(studentsSortedTable.rows.length);
var sortedCells = studentsRows[i].cells;
for(var j=0; j<sortedCells.length; j++)
{
var newCell = newRow.insertCell(newRow.cells.length);
newCell.innerHTML = sortedCells[j].innerHTML;
}
}
studentsSortedTable.style.display = "inline";
}
</script>
<h3>用DOM动态控制表格</h3>
<input type="button" onclick="insertData()" value="插入一行数据" />
<input type="button" onclick="editData()" value="修改单元格数据" />
<input type="button" onclick="insertDeleteCell()" value="动态添加删除列" />
<input type="button" onclick="insertInputCell()" value="动态添加输入框列" />
<input type="button" onclick="deleteAllRows()" value="删除所有行保留行首" />
<input type="button" onclick="sortByBirthday()" value="按生日进行排序" />
<p></p> <table id="students" border="1">
<caption>
<h3>学生列表</h3>
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">性别</th>
<th scope="col">生日</th>
<th scope="col">联系方式</th>
</tr>
<tr>
<td>陈</td>
<td>B073</td>
<td>男</td>
<td>1126</td>
<td>15915554615</td>
</tr>
<tr>
<td>王</td>
<td>B071</td>
<td>女</td>
<td>0304</td>
<td>13054115694</td>
</tr>
<tr>
<td>曹</td>
<td>B070</td>
<td>男</td>
<td>0815</td>
<td>1381377894</td>
</tr>
<tr>
<td>郑</td>
<td>B078</td>
<td>男</td>
<td>1019</td>
<td>1322377896</td>
</tr>
</table>
<p></p>
<table id="students_sorted" border="1" style="display:none">
<caption>
<h3>排序后的学生列表</h3>
</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">性别</th>
<th scope="col">生日</th>
<th scope="col">联系方式</th>
</tr>
</table>
</body>
</html>
用DOM动态控制表格的更多相关文章
- DOM操作表格
前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...
- 采用DOM进行表格的修改操作
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...
- DOM系列---DOM操作表格
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...
- 第一百一十五节，JavaScript，DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- DOM操作表格——HTML DOM
html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...
- DOM拓展表格小练习
涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...
- JavaScript(第二十天)【DOM操作表格及样式】
DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- DOM中表格的操作方法总结
DOM中表格的操作方法总结 <table/>元素的方法如下: caption:指向<caption/>元素(如果存在): tBodies:<tbody/>元素的集合 ...
随机推荐
- Docker 管理工具的选择：Kubernetes 还是 Swarm？
[编者的话]选择Kubernetes 或者 Swarm 就像在将 Linux 桌面发行版的范围缩小到两个后选出一个最喜欢的.哪个更满足你的需要如何才是决定因素. [3 天烧脑式基于Docker的CI/ ...
- HDU 1709
MB,一开始就想到是不是只要加上一个不选择砝码的情况,但一直没动手做,因为看了看网上了,觉得总有点复杂,认为自己想错了.... 相信自己 #include <iostream> #incl ...
- 深入理解Dalvik虚拟机- 解释器的执行机制
Dalvik的指令运行是解释器+JIT的方式,解释器就是虚拟机来对Javac编译出来的字节码,做译码.运行,而不是转化成CPU的指令集.由CPU来做译码,运行.可想而知.解释器的效率是相对较低的,所以 ...
- CentOS6.3升级GCC到GCC4.8.2
server上安装的GCC版本号过旧.已经不满足个人使用的版本号需求,故决定对其进行升级操作.由当前版本号3.4.6升级到4.8.2.然受权限制约.仅仅能安装到个人文件夹.因此假设您的server能够 ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- 大量文件时使用ls
有时一个目录下的文件实在太多, ls的时候就卡住了. 其实, 如果不加排序的话, 就可以迅速的显示文件. ls -f 解释: -f do not sort, enable -aU, disable - ...
- KMP字符串查找算法
#include <iostream> #include <windows.h> using namespace std; void get_next(char *str,in ...
- Windbg调试托管代码
Windbg调试.net托管代码需要借助于SOS.dll,.Net 4.0的32位sos.dll的路径在C:\Windows\Microsoft.NET\Framework\v4.0.30319,64 ...
- C++之易混淆知识点一-----static详解
1.const.mutable与volatile的区别:const表明内存被初始化以后,程序将不能对它进行修改.volatile则表明,即使程序代码没有对内存单元进行修改,但是里面的值也可能会发生变化 ...
- 092117-6265-01.dmp 蓝屏日志文件
Microsoft (R) Windows Debugger Version 10.0.15063.137 AMD64 Copyright (c) Microsoft Corporation. All ...