用DOM动态控制表格

最新推荐文章于 2024-07-09 16:46:46 发布

weixin_33958585

最新推荐文章于 2024-07-09 16:46:46 发布

阅读量62

点赞数

文章标签： xhtml java javascript ViewUI

原文链接：http://www.cnblogs.com/vactor/p/4914396.html

版权

<%@ 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='#' οnclick='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" οnclick="insertData()" value="插入一行数据" />
    <input type="button" οnclick="editData()" value="修改单元格数据" />
    <input type="button" οnclick="insertDeleteCell()" value="动态添加删除列" />
    <input type="button" οnclick="insertInputCell()" value="动态添加输入框列" />
    <input type="button" οnclick="deleteAllRows()" value="删除所有行保留行首" />
    <input type="button" οnclick="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>

转载于:https://www.cnblogs.com/vactor/p/4914396.html

weixin_33958585

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用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/...
复制链接

扫一扫