<%@ 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动态控制表格的更多相关文章

  1. DOM操作表格

    前面的话 表格table元素是HTML中最复杂的结构之一.要想创建表格,一般都必须涉及表示表格行.单元格.表头等方面的标签.由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量 ...

  2. 采用DOM进行表格的修改操作

    2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...

  3. DOM系列---DOM操作表格

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本篇章主要了解一下DOM操作表格. 一．操作表格 <table>标签是H ...

  4. 第一百一十五节，JavaScript，DOM操作表格

    JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...

  5. DOM操作表格——HTML DOM

    html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...

  6. DOM拓展表格小练习

    涉及的知识点 DOM操作HTML页面.DOM操控表格.一些基本的事件.遍历知识.数组字符串知识.函数的作用域知识 效果图 html代码 <body><div id="con ...

  7. JavaScript(第二十天)【DOM操作表格及样式】

    DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DOM操作表格和样式的一些知识. 一．操作表格 <table& ...

  8. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  9. DOM中表格的操作方法总结

    DOM中表格的操作方法总结 <table/>元素的方法如下: caption:指向<caption/>元素(如果存在): tBodies:<tbody/>元素的集合 ...

随机推荐

  1. MyBatis学习总结（2）——使用MyBatis对表执行CRUD操作

    一.使用MyBatis对表执行CRUD操作--基于XML的实现 1.定义sql映射xml文件 userMapper.xml文件的内容如下: <?xml version="1.0&quo ...

  2. Mysql 5.7 官方文档翻译

    始于 2017年4月1日-愚人节 1.1 MySQL 5.7 新功能 本章节介绍了MySQL 5.7 新版本中新增.废弃.删除的功能. 在1.5章节 Section 1.5, "Server ...

  3. Android，iOS打开手机QQ与指定用户聊天界面

    在浏览器中能够通过JS代码打开QQ并弹出聊天界面.一般作为客服QQ使用. 而在移动端腾讯貌似没有发布提供相似API,可是却能够使用schema模式来启动手机QQ. 下面为详细代码: Android: ...

  4. 第一个python作业题目以及代码

    1. 编写程序,用户输入一个三位以上的整数,输出其百位以上的数字.例如用户输入1234,则程序输出12.(提示:使用整除运算.) x=input("请输入一个三位以上的数字:") ...

  5. 基于One-Class的矩阵分解方法

    在矩阵分解中. 有类问题比較常见,即矩阵的元素仅仅有0和1. 相应实际应用中的场景是:用户对新闻的点击情况,对某些物品的购买情况等. 基于graphchi里面的矩阵分解结果不太理想.调研了下相关的文献 ...

  6. WPF学习（四） － 附加属性

    冷静了一晚,我就当这次学习的过程是在看狗血剧情的武打小说吧:没有垃圾的武术,只有垃圾的武者…… 还有个话儿怎么说来着:你们是用户,不是客户,也就有个使用的权力.搞清楚身份,别叽叽歪歪的! 没办法,全世 ...

  7. sql server 更新满足条件的某一条记录

    上图数据:SNum为”18004XXXXX000001K2GW 4000 L1C“,OffLineStation为“OP1010”的有两条数据,当where条件中为上述两者时会同时更新这两条数据,并不 ...

  8. Photoshop CC (2015.2) 2016.1 版

    1.设计空间(预览版)增强 Design Space (Preview) 2.画板 3.Surface Pro触屏优化(多种手势) 4.自定义工具栏和工作区 5.字体收藏夹(要死掉一批扩展) 6.库( ...

  9. Android ViewPager 动画效果

    找到个不错的开源项目:https://github.com/jfeinstein10/JazzyViewPager Android ViewPager 动画效果   

  10. 手工清理win7系统C盘的技巧

    在我们日常使用电脑的过程中,随着使用的时候越久,大家就会发现电脑的运行速度变的越慢了,大家都知道很多系统东西一般都会安装在C盘,系统在运行的时候就会不断的产生垃圾文件以及其他我们根本用不到的文件,这样 ...