js动态创建表格,可以动态的删除(事件委托)

最新推荐文章于 2021-12-28 17:41:15 发布

hardwork come on

最新推荐文章于 2021-12-28 17:41:15 发布

阅读量824

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_43353869/article/details/105606070

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

js事件

1.1 onclick　　点击事件

(阻止事件冒泡：ie使用 e.cancleBubble = true、e.stopPropagation()；取消默认事件： e.preventDefault()，IE则是使用e.returnValue = false )

禁止a标签的跳转

"<a href='javascript:;'>删除</a>";//这种可以禁止a标签的跳转

innerHTML中可以插入标签
标签.innerHTML='<a javascript:"">删除</a>';

js动态的成绩表格,可以删除当前的一行。(用事件委托)

知识点：

创建内容

innerHTML删除子元素

创建标签

dom.createElement() 标签(dom元素).createElement()

添加到父元素

dom.appenChild(子元素) 父元素.appenChild(子元素)

删除元素.

dom元素.remove()

动态的删除元素

事件委托的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态生成表格</title>
	<style type="text/css">
		table{
			border: 1px solid red;
		}
		td{
			text-align: center;
		}
	</style>
</head>
<body>
	   <input  placeholder="请输入列"  >
	   <input  placeholder="请输入行"  >
	   <button>按钮</button>
	   <table>
	   </table>
	   <div id="box"></div>
	   <script type="text/javascript">
	   	        var input1=document.getElementsByTagName('input')[0];
	   	        var input2=document.getElementsByTagName('input')[1];
	   	        var button=document.getElementsByTagName('button')[0];
	   	        var box=document.getElementById('box');
	   	        console.log(box);
	   	        button.onclick=function(){
	   	        	 var inputval=Number(input1.value);
	   	        	 var inputvalt=Number(input2.value);
	   	        	 //创建一个div标签
	   	        	 var table=document.createElement('table');
	   	        	//input这里的inputval是个数字
	   	        	  for(var i=0;i<inputval;i++){//行
	   	        	  	      var tr=document.createElement('tr');
	   	        	  	  for(var j=0;j<inputvalt;j++){//列               
	   	        	  	      var  td=document.createElement('td');
	   	        	  	      td.style.color=getColor();
	   	        	  	      td.innerHTML=getRand(0,100);   
	   	        	  	      // console.log(j)	
	   	        	  	      td.style.backgroundColor=getColor();
	   	        	  	      tr.appendChild(td);  	           	  	       	  	    
	   	        	  	  }		
	   	        	  	      //在末尾的那一列添加删除的按钮
	   	        	  	      var a=document.createElement('a');  
	   	        	  	      a.innerHTML="<a href='javascript:;'>删除</a>";
	   	        	  	      tr.appendChild(a);	 
	   	        	  	      // box.appendChild(table);
	   	        	  	      table.appendChild(tr);  
	   	        	  	      //用事件对象的方式去删除整一列
	   	        	  	      //事件委托给父元素身上
	   	        	  };
	   	        	  //添加列  	  
	   	        	  // box.appendChild(table);
	   	        	 // console.log(document.documentElement('body'))
	   	        	 // console.log(tr.nodeType());
	   	        	 // var body=document.body.appendChild(body);
	   	        	 // console.log(document.body);
	   	        	 // 把一个元素添加到body元素中
	   	        	 // document.body.appendChild(table)
	   	        	 box.appendChild(table);
	   	        	 console.log(inputval); 
	   	        	 console.log(inputvalt);
	   	        	 //是把定义的元素变成空,内容输入完成之后变成空 把input按钮的value变成空
	   	        	  input1.value="";
	   	        	  input2.value="";   	        	 
	   	        }
	   	     
	   	        //这个问题牵扯到页面加载顺序的问题。
	   	        //动态生成表格.html:68 Uncaught TypeError: Cannot set property 'click' of undefined
	   	        //动态生成表格.html:70 Uncaught TypeError: Failed to execute 'getElementById' on 'Document': 1 argument required, but only 0 present.
	   	            var boxs=document.getElementById('box');
	   	         	boxs.onclick=function(e){//在js中是onclick,在jq是click
	   	        	  	      	var event=e||event.window;
	   	        	  	      	var target=event.target||event.srcElement;
	   	        	  	      	if(event.target.nodeName=="A"){
	   	        	  	      	   event.target.parentNode.parentNode.remove();//整个tr被清楚
	   	        	  	      	}
	   	        	  	      	console.log(target);	   	        	  	
	   	        	  	} 	  
	   	        	
	   //封装是哪个生成的随机数
	   function getRand(min,max){
	   		return parseInt(Math.random()*(max-min+1))
	   }
	   //封装一个十六进制的颜色值
	   // function getColor(){
	   // 	var str="0123456789abcdef";
	   // 	var color="#";
	   // 	//颜色值是6字母组成
	   // 	for(var i=0;i<6;i++){
	   // 		var rand=getRand(0,15);
	   // 		var color+=str.chartAt(rand);//把它生成的随机的字母组合在一起
	   //    }
	   //    return color;
	   // }
	   function getColor(){
		    var str="#";
		    var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
		    for(var i=0;i<6;i++){
		        var num=parseInt(Math.random()*16);
		        str+=arr[num];
		    }
		    return str;
		}

		console.log(getColor());
	   // for(var i=0;i<100;i++){
	   // 	console.log(getColor())
	   // }
	   // 
	   // 第一种方案
	   // function getColor(){
	   //  var str1="0123456789abcdef";
	   // 	  var color="#";
	   // 	  for(var i=0;i<6;i++){
	   // 	  	//动态生成表格.html:60 Uncaught RangeError: Maximum call stack size exceeded自己调用自己
	   // 	  	 color+=str1.charAt(getRand(0,15));
	   // 	  }
	   // 	  return color;
	   // }
	   // console.log(getColor());
	   // 
	   // 
	   // 第二种方案
	      function getColor(){
	      	var color="#";
	      	//以数组的方式去存储  十六进制颜色值
	      	var str2=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
	      	for(var i=0;i<6;i++){
	      		var  rand=getRand(0,15);
	      		color+=str2[rand]
	      	}
	      	return color
	      }
	      console.log(getColor());
	   // 
	  //       var str1="0123456789abcdef";
	  //       //charAt() 方法可返回指定位置的字符。  chartAt没有这个方法,写代码是要细心
	  //       console.log(str1.charAt(12));
	  //       console.log(str1.indexOf(182));
	     
			// var str="Hello world!"
			// document.write("The first character is: " + str.charAt(0) + "<br />")
			// document.write("The second character is: " + str.charAt(1) + "<br />")
			// document.write("The third character is: " + str.charAt(2))
		
	   </script>
</body>
</html>