本人公众号上线啦！！！

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

通过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 = "格子的内容";
}

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

java在表格单元中加入button按钮_java – 在表中实现一个按钮,该按钮使用Th...
使用Spring Boot和Thymeleaf的tl; dr,当用户单击特定行的第5列中的按钮时,如何在表单中返回表的第1列值? 嗨,您好!长时间听众,第一次来电.对于这个问题,我非常感谢你的帮助. ...
站长常用的200个js代码
站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...
(转）常用的js代码
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 & ...
超级实用且不花哨的js代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.src ...
js 代码大全(各种方法、属性)
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
js代码大全（各种方法、属性）《转载》
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
(转)超级实用且不花哨的js代码大全
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.s ...
JS代码大全（都是网上看到自己整理的）
原文 JS代码大全 (都是网上看到自己整理的) 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
jsp/html开发中常用的JS代码和页面特效代码
1.jsp/html开发中常用的JS代码 1.后退前进 <input type="button" value="后退" onClick="hi ...

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

本人公众号上线啦！！！

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

需求分析:

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

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

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

实现的效果

需求实现

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

2.编写生成表格的函数

3.编写生成input框函数

4.编写生成button按钮

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

最新文章

热门文章