前端开发者| 前端界面快速开发框架 |
| 电商网站前端开发框架 |
| webapp前端开发框架 |
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
姓名：<input type=”text” id=”user” placeholder=”请输入姓名”>
年龄：<input type=”text” id=”xh” placeholder=”请输入年龄” />
<input type=”button” value=”添加” id=”btn” />
<input type=”button” value=”搜索” id=”btn1″ />
<table border=”1″ width=”50%” id=”table”>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>xh001</td>
<td>王小明</td>
<td>22</td>
<td><a href=”javascript:;”>删除</a></td>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td>22</td>
<td><a href=”javascript:;”>删除</a></td>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td>22</td>
<td><a href=”javascript:;”>删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>22</td>
<td><a href=”javascript:;”>删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td>22</td>
<td><a href=”javascript:;”>删除</a></td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById(“table”);
for (var j = 0; j < table.tBodies[0].rows.length; j++) {
if (j % 2 == 0) {
table.tBodies[0].rows[j].style.background = “#ebebeb”;
}
else {
table.tBodies[0].rows[j].style.background = “#ccc”;
}
}
var xh = document.getElementById(“xh”);
var user = document.getElementById(“user”);
var btn = document.getElementById(“btn”);
var btn1 = document.getElementById(“btn1”);
var num = table.tBodies[0].rows.length;
//添加查询功能
btn1.onclick = function () {
for (var n = 0; n < table.tBodies[0].rows.length; n++) {
var str1 = table.tBodies[0].rows[n].cells[1].innerHTML.toLowerCase();
var str2 = user.value.toLowerCase();
if (str1.search(str2) != -1) {
table.tBodies[0].rows[n].style.background = “yellow”;
}
}
};
//添加点击事件
btn.onclick = function () {
//创建行
var tr = document.createElement(“tr”);
//创建序号列
var td1 = document.createElement(“td”);
td1.innerHTML = ++num;
//隔行变色功能
if (num % 2 == 0) {
tr.style.background = “#ccc”;
}
else {
tr.style.background = “#ebebeb”;
}
//创建姓名列
var td2 = document.createElement(“td”);
td2.innerHTML = user.value;
//创建年龄列
var td3 = document.createElement(“td”);
td3.innerHTML = xh.value;
//创建删除列
var td4 = document.createElement(“td”);
td4.innerHTML = “<a href=’javascript:;’ >删除</a>”;//点击删除按钮，删除一行
//添加删除功能
td4.getElementsByTagName(“a”)[0].onclick = function () {
table.tBodies[0].removeChild(this.parentNode.parentNode);
};
//把行，列添加到表格
table.tBodies[0].appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
};
//删除-行
var arr = [];
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
arr.push(table.tBodies[0].rows[i].cells[3].getElementsByTagName(“a”)[0]);
}
for (var j = 0; j < arr.length; j++) {
arr[j].onclick = function () {
table.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
//添加鼠标滑过效果
</script>
</body>
</html>
| web前端页面开发框架 |
| 前端开发面试框架问题 |
| 前端开发 框架 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册