DOM学习笔记五

最新推荐文章于 2021-07-17 23:23:49 发布

u013497151

最新推荐文章于 2021-07-17 23:23:49 发布

阅读量1.3k

点赞数

分类专栏： JavaScript Learn_Web

本文链接：https://blog.csdn.net/wjw0130/article/details/41923509

版权

Learn_Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

DOM创建表格：

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href="table.css">-->
    <style type="text/css">
        @import url(table.css);
    </style>
</head>
<body>
    <script type="text/javascript" >
        function CreatTable(){
            //最原始的方式
            var oTableNode = document.createElement("table");//创建table标签
            var oTbodyNode = document.createElement("tbody");
            var oTrNode = document.createElement("tr");
            var oTdNode = document.createElement("td");
            oTdNode.innerHTML = "单元格yi";
            oTrNode.appendChild(oTdNode);
            oTbodyNode.appendChild(oTrNode);
            oTableNode.appendChild(oTbodyNode);
            document.getElementsByTagName("div")[0].appendChild(oTableNode);
        }
    </script>
    <input type="button" value="创建表格" οnclick="CreatTable()"/>
    <hr>
    <div></div>
</body>
</html>


table.css部分代码

table {
    border:#24cFFF 1px solid;
    width: 500px;
    border-collapse: collapse;
}
table td{
    border:#000000 1px solid;
    padding: 5px;
}

第二种：

实现创建指定行数列数的表格，并实现删除指定的行和列

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <!--<link rel="stylesheet" type="text/css" href="table.css">-->
    <style type="text/css">
        @import url(table.css);
    </style>
</head>
<body>
    <script type="text/javascript" >
        function CreatTable(){
            /*/
            既然操作的是表格，那么完全可以表格节点对象来完成
            表格主要由行组成，表格节点对象中insertRow方法，已经完成了行的创建并创建过程
            而单元格的创建，同样，行也最清楚
             */
            var oTableNode = document.createElement("table");
            //给对象赋属性性值有两种方式
            //1. oTableNode.id = "tableid";
            oTableNode.setAttribute("id","tableid");

            var rownum = parseInt(document.getElementsByName("rownum")[0].value);
            var colnum = parseInt(document.getElementsByName("colnum")[0].value);
            for(var i = 1;i<=rownum;i++) {
                var oTrNode = oTableNode.insertRow();
                for(var j = 1;j<=colnum;j++) {
                    var oTdNode = oTrNode.insertCell();//创建单元格并添加
                    oTdNode.innerHTML = i+"单元格"+j;
                }
            }
            document.getElementsByTagName("div")[0].appendChild(oTableNode);
            //5行6列表格创建完毕，但是点几下，出现几个
            //input组件中有属性disable,获取组件的状态，默认是false
            document.getElementsByName("CreatButton")[0].disabled = true;
            //创建一次，就再也无法点击
        }
        function DeleteTableTr(){

            var oTableNode = document.getElementById("tableid");
            if(oTableNode==null) {
                alert("表格不存在") ;
                return ;
            }
            var rowNum = parseInt(document.getElementsByName("deleterownum")[0].value);
            if(rowNum>=1 && rowNum<=oTableNode.rows.length)//rows是行集合
            oTableNode.deleteRow(rowNum-1);
            else{
                alert("要删除的行数不存在");
            }
        }
        function DeleteTableTd(){
            //实际上是没有列这一概念的，删除列等于删除每一行的当前列数的单元格
            var oTableNode = document.getElementById("tableid");
            if(oTableNode==null) {
                alert("表格不存在") ;
                return ;
            }
            var colNum = parseInt(document.getElementsByName("deletecolnum")[0].value);
            if(colNum<1 || colNum > oTableNode.rows[0].cells.length){//任意一行的单元格集合的长度
                alert("要删除的列不存在");
                return;
            }
            for(var i = 0;i<oTableNode.rows.length;i++){
                oTableNode.rows[i].deleteCell(colNum-1);
            }
        }
    </script>
    行数:<input type="text" name="rownum" />列数:<input type="text" name="colnum" />
    <input type="button" name="CreatButton" value="创建表格" οnclick="CreatTable()"/>
    <hr><br><br>

    删除行:<input type="text" name="deleterownum" />
      <input type="button" value="删除行号" οnclick="DeleteTableTr()"/>
    <br><br>

    删除列:<input type="text" name="deletecolnum" />
      <input type="button" value="删除列号" οnclick="DeleteTableTd()"/>
    <hr>
    <div></div>
</body>
</html>

实现行颜色间隔显示并高亮：

鼠标碰触，高亮

<!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="Untitled-2.css">
	<style type="text/css">
		.one{/*奇数行css样式*/
		background-color:#E1E16A;
		}
		.two{/*偶数*/
		background-color:#75F094;
		}
		.high{/*鼠标悬停高亮效果*/
		background-color:#FF0000;
		}
	</style>
	<script type="text/javascript" >
		function trColor(){
			var oTableNode = document.getElementById("tableid");
			var oTrNodes = oTableNode.rows;//获取所有行集合
			for(var i = 1;i<oTrNodes.length;i++){
				
				oTrNodes[i].className = (i&1)?"one":"two"; //获取奇偶
				var clname;//记录鼠标悬停前的class值
				//给每一个行对象添加两个事件，把下面写的事件处理拿上来
				oTrNodes[i].οnmοuseοver=function (){
				//alert("asd")
					clname = this.className;
					this.className="high";;
				}
				oTrNodes[i].οnmοuseοut=function (){
					this.className=clname;
				}
			}
		}
		//trColor();下面还未加载完
		onload = function(){  //等加载完表格，再调用
		trColor();
		}
	/*	var clname;//记录鼠标悬停前的class值
		function over(node){
			clname = node.className;
			node.className="high";
			
		}
		function out(node){
			node.className=clname;
		}*/
	</script>

  </head>
  
  <body>
    <table id="tableid">
    <tr >
    	<th>姓名</th><th>年龄</th><th>籍贯</th>
    </tr>
   <!-- <tr onMouseOver="over(this)" onMouseOut="out(this)">这样写每一个tr标签都写，费劲-->
   <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    <tr>
    	<td>你好</td><td>18</td><td>北京</td>
    </tr>
    </table>
  </body>
</html>


/* CSS Document */

table{
	border:#249BDB 1px solid;
	width:500px;
	border-collapse:collapse;
}
table td{
	border:#249BDB 1px solid;
	padding:10px;
}
table th{
	border:#249BDB 1px solid;
	padding:10px;
	background-color:rgb(220,220,220);
}

表格排序：

<!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)" οnclick="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" οnclick="checkAll(this)"/>全选<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="item" value="4500"/>电脑：4500<br/>
        <input type="checkbox" name="allitem" οnclick="checkAll(this)"/>全选<br/>
        <input type="button" value="总金额" οnclick="getSum()"/><span id="sumid"></span>
</body>
</html>