首页 > 代码库 > DOM学习笔记五

DOM学习笔记五

2024-08-07 21:10:49   221人阅读

DOM创建表格：


在页面中创建一个5行5列的表格
1.事件源，按钮

2.必须有一个生成表格节点存储位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"table.css">-->>
第二种：

实现创建指定行数列数的表格，并实现删除指定的行和列
<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"table.css">-->>实现行颜色间隔显示并高亮：

鼠标碰触，高亮
<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
    
    <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"Untitled-2.css">>
表格排序：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css" >
        th a:link,th a:visited{
            color: #0000FF;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        function sortAge(){

            //1.获取需要排序的对象数组
            //2.对数组中的每一行年龄单元格进行比较，完成对象在数组中的交换
            //3.将排好序的数组填入表格
            var oTabNode = document.getElementById("info");
            var oTrNodes = oTabNode.rows;
            //临时容器，存储行对象
            var trArr = [];
            //变量原行集合，并将需要的排序的行对象存储
            for(var i = 1;i<oTrNodes.length;i++){
                trArr[i-1] = oTrNodes[i];
            }
           // alert("over");
            //对临时容器排序
            MySortRule(trArr);

            //将排序后的对象添加回表格
            for(var i = 0;i<trArr.length;i++){
                //tr的父节点是tbody，不是table
               // alert(trArr[i].innerHTML);验证如何排序
                trArr[i].parentNode.appendChild(trArr[i]);
            }
        }
        function MySortRule(trArr){

            for(var i =0;i<trArr.length-1;i++){
                for(var j = i+1;j<trArr.length;j++){
                    //比较的是这一行的第2个单元格的内容，注意是整数，不可字符串

                    if(parseInt(trArr[i].cells[1].innerHTML) > parseInt(trArr[j].cells[1].innerHTML)){
                        //trArr[i].swapNode(trArr[j]);不能交换
                        swap(trArr,i,j);
                    }
                }
            }
        }
        function swap(trArr,i,j){
            var t = trArr[i];
            trArr[i] = trArr[j];
            trArr[j] = t;
        }
    </script>
</head>
<body>
        <table id="info">
            <tr>
                <th>姓名</th>
                <th><a href="javascript:void(0)" onclick="sortAge()">年龄</a></th>
                <th>籍贯</th>
            </tr>
            <tr>
                <td>老朱</td><td>21</td><td>泰安</td>
            </tr>
            <tr>
                <td>老孙</td><td>20</td><td>济南</td>
            </tr>
            <tr>
                <td>小强</td><td>35</td><td>北极</td>
            </tr>
            <tr>
                <td>哈哈</td><td>30</td><td>北京</td>
            </tr>
            <tr>
                <td>你好</td><td>45</td><td>深圳</td>
            </tr>
        </table>
</body>
</html>


示例 — 全选商品列表
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
        <script type="text/javascript">
            function getSum(){
                /*
                获取所有name为item的复选框，判断checked的状态，true选中
                 */
                var sum = 0;
                var oCheckboxs = document.getElementsByName("item");
                for(var i = 0;i<oCheckboxs.length;i++){
                    if(oCheckboxs[i].checked){
                        sum += parseInt(oCheckboxs[i].value);
                    }
                }
                var s = sum+"RMB";
                document.getElementById("sumid").innerHTML = s.fontcolor("red").fontsize("5");
            }

            function checkAll(node){
                /*
                将全选的boxchecked状态赋值给所有的item 盒子的状态
                 */
                var oCheckboxs = document.getElementsByName("item");
                for(var i = 0;i<oCheckboxs.length;i++){
                        oCheckboxs[i].checked = node.checked;
                }
            }
        </script>
        <input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>
        <input type="checkbox" name="item" value=http://www.mamicode.com/"4500"/>电脑：4500
>

DOM学习笔记五


联系
我们