原生js生成table表单

最新推荐文章于 2024-05-16 16:52:30 发布

这里的天空很蓝

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量2k

点赞数 1

分类专栏： javascript 文章标签： javascript 表单

本文链接：https://blog.csdn.net/qq_35358676/article/details/78673840

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.想要学习好javascript不能总是使用jquery,总是使用jquery会使以后的道路也来越窄

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>table</title>
  <style>
  .licl-table{
	width:500px;
	height:350px;
	border: 1px solid #000000;
	border-collapse:collapse;
  }
  .licl-table th,td{
	border:1px solid #000000;
  }
  </style>
 </head>
 <body>
  <table class="licl-table" id="simpleTable"></table>
 </body>
 <script type="text/javascript">
	
	function $getById(id){return document.getElementById(id)};
	function $getByClass(name){return document.getElementByClassName(name);}
	var simpletable=$getById("licl-table");

	


	function initTable(table,config){
		var colums=config.colums;
		var thead=document.createElement("thead");
		table.appendChild(thead);
			var tr=document.createElement("tr");
			thead.appendChild(tr);
		var tbody=document.createElement("tbody");
		table.appendChild(tbody);
		for(var i=0;i<colums.length;i++){
			var th=document.createElement("th");
			tr.appendChild(th);
			th.innerHTML=colums[i].title;
		}

	}
	function loadTable(table,config,data){
		var colums=config.colums;
		for(var i=0;i<data.length;i++){
			var tr=document.createElement("tr");
			table.lastChild.appendChild(tr);
			for(var j=0;j<colums.length;j++){
				var td=document.createElement("td");
				tr.appendChild(td);
				td.innerHTML=data[i][colums[j].name];
			}
		}
	}

	

	var config={
			colums:[{
				title:"姓名",
				name:"name"
			},{
				title:"年龄",
				name:"age"
			},{
				title:"性别",
				name:"sex"
			}
			]
	}
	var data=[
		{name:"licl",age:25,sex:"男"},
		{name:"周星驰",age:53,sex:"男"},
		{name:"李小龙",age:63,sex:"男"}
	]

	var simpletable=$getById("simpleTable");
	/*simpletable.prototype.initTable=initTable();
	simpletable.prototype.loadTable=loadTable();*/

	initTable(simpletable,config);
	loadTable(simpletable,config,data);

	/*
	var chils= s.childNodes;  //得到s的全部子节点
	var par=s.parentNode;   //得到s的父节点
	var ns=s.nextSibling;   //获得s的下一个兄弟节点
	var ps=s.previousSibling;  //得到s的上一个兄弟节点
	var fc=s.firstChild;   //获得s的第一个子节点
	var lc=s.lastChild;   //获得s的最后一个子节点
	*/

 </script>
</html>

2.运行效果

。

这里的天空很蓝

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js生成table表单

1.想要学习好javascript不能总是使用jquery,总是使用jquery会使以后的道路也来越窄 table .licl-table{ width:500px; height:350px; border: 1px solid #000000; border-collapse:collapse; } .licl-table th,td{
复制链接

扫一扫