用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/>元素的集合 ...

随机推荐

SPOJ 4491
不妨先把所有要求的素数的对的个数写出来 f(2)=u(1)G(2)+u(2)*G(2*2)+u(3)*G(2*3)+.....u(k2)*G(2*k2) f(3)=u(1)G(3)+u(2)*G(2* ...
[Angular] Send Data via HTTP using Angular HttpParams
Obviously in a real world application we do not only fetch data from the backend, but we also send d ...
Residual Networks <2015 ICCV, ImageNet 图像分类Top1>
本文介绍一下2015 ImageNet中分类任务的冠军--MSRA何凯明团队的Residual Networks.实际上.MSRA是今年Imagenet的大赢家.不单在分类任务,MSRA还用resid ...
linux 数据库
查看数据库状态:service mysqld status 启动数据库服务 service mysql start 如果出现:Another MySQL daemon already running ...
Zorka监控平台的Online reconfiguration基本效果展示
在上一篇日志中,我简介了Zorka的Online reconfiguration的用法,可是没怎么介绍如何看到在线更改的效果,这里简单说说. 还是以之前的tomcat为例,我们在文件夹zorka\sc ...
bzoj4547: Hdu5171 小奇的集合(矩阵乘法)
4547: Hdu5171 小奇的集合题目:传送门题解: 做一波大佬们的坑...ORZ 不得不说,我觉得矩阵很简单啊,就一个3*3的(直接看代码吧) 给个递推柿纸:f[i]=f[i-1]+max1 ...
集群版本升级——rolling upgrade在ES 单节点从 restart 到加入集群，大概要 100s 左右的时间。也就是说，这 100s 内，该节点上的所有分片都是 unassigned 状态
集群版本升级 Elasticsearch 作为一个新兴项目,版本更新非常快.而且每次版本更新都或多或少带有一些重要的性能优化.稳定性提升等特性.可以说,ES 集群的版本升级,是目前 ES 运维必然要做 ...
vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...
Matplotlib画图可选颜色
经常会有画图找不到合适颜色的尴尬情景, 在网上找到一张matplotlib可以用的颜色图:
weboffice7
document.all.WebOffice1.ShowToolBar = false;

用DOM动态控制表格

用DOM动态控制表格的更多相关文章

随机推荐

热门专题