通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里

本人公众号上线啦！！！

公众号与博客名一样：没有腹肌的程序猿
公众号文章类型：工作上所遇到的需求实现方案分享。
此外也会提供一些数据集供大家使用。（这个还在规划中，毕竟打工人时间挺紧的，哈哈哈哈）
到时候也会不定期给大家抽一些小东西哦。

通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里

需求分析:

• 使用JS动态生成Table表格、input框、button按钮

• 通过input框、button按钮实现查询。

• 将查询后的结果动态填写在table里面。

实现的效果

通过点击测试按钮生成下面的表格和其他组件

需求实现

1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数

<div id="ch_DIV"></div>
<button onclick="createTable()">测试</button>

2.编写生成表格的函数

var div = document.getElementById("ch_DIV");
var table = document.createElement("table");
//给table的id className进行赋值
table.id = "visitInfoTable";
table.className = "visitInfoTable";
//表格的属性可以依旧自己的需求变更
table.border="1px";
table.cellSpacing = "0px";
table.style.borderColor="#6495ED";
//生成表格  表格由于带有表头, 大家可以根据自己的需求设置表头,我这写的例子的表头是在每一行的第一个
//这是一个5行2列的格子. i控制行 k控制列
for(var i=0;i<5;i++){
		var row = table.insertRow();//创建行
		for(k=0;k<2;k++){
			if(i==0&&k==0){
				 var cell = row.insertCell();//创建一个单元 
		            cell.height = "30";//cell的各种属性 
		            cell.width = "160";
		            //cell.style.backgroundColor = "#E6E6FA"; 
		            cell.align = "center"; 
		            cell.style.border='1px #6495ED solid'; 
		            cell.innerHTML="格子内容";
			}else if(i==1&&k==0){
				var cell = row.insertCell();//创建一个单元 
	            cell.height = "30";//更改cell的各种属性 
	            cell.width = "160";
	            cell.align = "center"; 
	            cell.style.border='1px #6495ED solid'; 
	            cell.innerHTML="格子内容";
			}else if(i==2&&k==0){
				var cell = row.insertCell();//创建一个单元 
	            cell.height = "30";//更改cell的各种属性 
	            cell.width = "160";
	            cell.align = "center"; 
	            cell.style.border='1px #6495ED solid'; 
	            cell.innerHTML="格子内容";
			}else if(i==3&&k==0){
				var cell = row.insertCell();//创建一个单元 
	            cell.height = "30";//更改cell的各种属性 
	            cell.width = "160";
	            cell.align = "center"; 
	            cell.style.border='1px #6495ED solid'; 
	            cell.innerHTML="格子内容";
			}else if(i==4&&k==0){
				var cell = row.insertCell();//创建一个单元 
	            cell.height = "30";//更改cell的各种属性 
	            cell.width = "160";
	            cell.align = "center"; 
	            cell.style.border='1px #6495ED solid'; 
	            cell.innerHTML="格子内容";
			}else{
				 var cell = row.insertCell();//创建一个单元 
		            cell.height = "30";//更改cell的各种属性 
		            cell.width = "160";
		            //cell.style.backgroundColor = "#E6E6FA"; 
		            cell.align = "center"; 
		            cell.style.border='1px #6495ED solid'; 
		            //cell.innerHTML="测试";
			}
		   
		}
    //然后把table加上页面的html中
    div.appendChild(table); 
	}

3.编写生成input框函数

//原理跟生成table是差不多的
var input = document.createElement("input");
input.className = "searchVisit"; 
input.id = "searchVisit"; 
//然后记得将input放到页面上 div怎么来的参考上面的table
div.appendChild(input); 
//获取input框的值,得确保页面已经生成input框.
var searchValue = document.getElementById("searchVisit").value;

4.编写生成button按钮

var button = document.createElement("button");
div.appendChild(button); 
//这一步骤是给button按钮里面添加文字.
var t=document.createTextNode("查询");
button.appendChild(t);
//button的点击事件
button.onclick = function(){
    //函数执行的内容.
    ..............
    //执行查询完后 将查询到的值添加到table表格中
    //首先通过getElementById拿到表格
    var table = document.getElementById("visitInfoTable");
    //获取到每一个小格子
    //这个是第一行第二个格子
    var td1=table.getElementsByTagName("tr").item(0).getElementsByTagName("td").item(1);
	//这个是第二行第二个格子
    var td2=table.getElementsByTagName("tr").item(1).getElementsByTagName("td").item(1);
	//这个是第三行第二个格子
    var td3=table.getElementsByTagName("tr").item(2).getElementsByTagName("td").item(1);
	//这个是第四行第二个格子
    var td4=table.getElementsByTagName("tr").item(3).getElementsByTagName("td").item(1);
	//这个是第五行第二个格子
    var td5=table.getElementsByTagName("tr").item(4).getElementsByTagName("td").item(1);
	//给格子赋值 
    td1.innerHTML = "格子的内容";
}