JS表格小案例
Posted helloworld-yu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS表格小案例相关的知识，希望对你有一定的参考价值。
创建一个表单，根据表单填写内容，创建表格行内容，每行后面有删除按钮，删除后可以删除该行一个搜索文本框，输入内容，点击按钮显示当前模糊查找到所有内容，显示在表格内
<!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以及删除键a
var 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;
// 遍历对象输出到每行的tr
for (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表格小案例的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段