创建一个表单，根据表单填写内容，创建表格行内容，每行后面有删除按钮，删除后可以删除该行一个搜索文本框，输入内容，点击按钮显示当前模糊查找到所有内容，显示在表格内
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">table {width: 800px;border: 1px solid lightcoral;border-collapse: collapse;}</style></head><body><input type="text" id="search" placeholder="search" /><input type="button" value="搜索" id="find" /><input type="text" id="name" placeholder="name" /><input type="text" id="psd" placeholder="password" /><input type="text" id="num" placeholder="number" /><input type="button" value="提交" id="send" onclick="add()" /><table id="tab"></table><script type="text/javascript">//通过ID获取所有元素var search = document.getElementById("search");var find = document.getElementById("find");var name1 = document.getElementById("name");var psd1 = document.getElementById("psd");var num1 = document.getElementById("num");var send = document.getElementById("send");var tab = document.getElementById("tab");//定义一个数组,用来存放所有的输入的对象var arr = [];function add() {//判断输入是否为空if (name1.value && psd1.value && num1.value) {//定义对象存放输入的属性及属性值var obj = {};//创建每行的tr以及删除键avar tr = document.createElement("tr");var aa = document.createElement("a");aa.textContent = "Del";tab.appendChild(tr);//向对象添加用户输入的属性及属性值obj.name = name1.value;obj.psd = psd1.value;obj.num = num1.value;//遍历对象输出到每行的trfor (var str in obj) {var td = document.createElement("td");td.textContent = str + " : " + obj[str];tr.appendChild(td);}tr.appendChild(aa);//对删除键添加点击事件aa.addEventListener("click", del);//创建点击事件,使tr删除function del(e) {e = e || window.event;tr.remove();}//每次执行后清空输入内容name1.value = psd1.value = num1.value = "";//将每次的对象放入数组中arr.push(obj);//console.log(arr);//为搜索键添加监听事件find.addEventListener("click", clickHandler);//新建点击函数,遍历数组,查找搜索的关键字function clickHandler(e) {e = e || window.event;var str = search.value;var data = arr.filter(function (t) {return t.name.indexOf(str) > -1;});// ???????????清空表格tab.textContent = "";//遍历数组对象for (var j = 0; j < data.length; j++) {//新建每一行var tr = document.createElement("tr");var aa = document.createElement("a");aa.textContent = "Del";tab.appendChild(tr);//新建每行的每一项for (var str in data[j]) {var td = document.createElement("td");td.textContent = str + " : " + data[j][str];tr.appendChild(td);}}}} else {alert("Error");}}</script></body></html>JS表格小案例
原文地址：https://www.cnblogs.com/HelloWorld-Yu/p/10177674.html