jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
🍅 Java学习路线:搬砖工的Java学习路线
🍅 作者:程序员小王
🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF
🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
一、用jquery实现动态表格相关功能
1、表格自动增加 当前行用户数据
2、表格自动删除 当前行数据
3、表格全选按钮
4、表格移动到当前行自动变色,自动变粗2px 的特性
- 项目效果视频
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
二、项目具体实现代码
1、html基本实现(超详细注解)
(1)添加员工数据
<!--这个div是添加员工数据-->
<div>
姓名:<input type="text" name="name" id="name">
年龄:<input type="text" name="age" id="age">
薪资:<input type="text" name="salary" id="salary">
省份:<select onchange="test3()" id="province">
<option value="gz">贵州</option>
<option value="hlj">黑龙江</option>
<option value="gs">甘肃</option>
</select>
城市:<select id="city"></select>
<input type="submit" value="提交" onclick="input()">
</div>
- 添加员工示列图
(2)表格(员工展示初始化表格)
<div class="table">
<div id="div_h3">
<h3>员工动态数据表格</h3>
</div>
<table border="1px" cellpadding="0px" cellspacing="0px" width="75%" align="center">
<thead>
<tr>
<th> <input type="checkbox" id="selectAll">全选</th>
<th>姓名</th>
<th>年龄</th>
<th>薪资</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
<tr onmouseover="test1(this);" onmouseout="test2(this);">
<td><input type="checkbox"></td>
<td>王恒杰</td>
<td>21</td>
<td>20000</td>
<td>贵州遵义</td>
<td><input type="button" onclick="remove(this)" value="删除"></td>
</tr>
<tr onmouseover="test1(this);" onmouseout="test2(this);">
<td><input type="checkbox"></td>
<td>吴洪旭</td>
<td>23</td>
<td>28000</td>
<td>黑龙江哈尔滨</td>
<td><input type="button" onclick="remove(this)" value="删除"></td>
</tr>
<tr onmouseover="test1(this);" onmouseout="test2(this);">
<td><input type="checkbox"></td>
<td>张西</td>
<td>22</td>
<td>18000</td>
<td>甘肃兰州</td>
<td><input type="button" onclick="remove(this)" value="删除"></td>
</tr>
<tr onmouseover="test1(this);" onmouseout="test2(this);">
<td><input type="checkbox"></td>
<td>杨福君</td>
<td>19</td>
<td>4000</td>
<td>贵州遵义</td>
<td><input type="button" onclick="remove(this)" value="删除"></td>
</tr>
</tbody>
</table>
</div>
- 员工展示初始化表格
2、css样式(超详细注解)
- css样式设置
1、body: 整个页面body的背景颜色样式
2、#div_h3:表格位置设置
3、#div_h3 h3 标题:“员工动态数据表格”的设置位置,颜色
4、th :表头的设置
5、tr:行设置
6、d:列设置
7、.cc1:表格自动变色,字体变大设置
- 具体css设置
<style>
body {
background-color: #3e94ec;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
}
#div_h3 {
display: block;
margin: auto;
max-width: 600px;
padding: 5px;
width: 100%;
}
#div_h3 h3 {
color: red;
font-size: 30px;
font-weight: 400;
font-style: normal;
font-family: "Roboto", helvetica, arial, sans-serif;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
th {
color: #D5DDE5;;
background: #1b1e24;
border-bottom: 4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size: 23px;
font-weight: 100;
padding: 24px;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align: middle;
}
th:first-child {
border-top-left-radius: 3px;
}
th:last-child {
border-top-right-radius: 3px;
border-right: none;
}
tr {
background: #FFFFFF;
font-size: 18px;
}
td {
padding: 20px;
text-align: left;
vertical-align: middle;
font-weight: 300;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}
.cc1 {
background: #4D4F66;
font-size: 20px;
}
</style>
3、javaScript实现相关功能(超详细注解)
因为使用了jquery框架需要query文件,我使用的文件是(如果需要,源码和jquery文件都在文末):
(1)用jquery实现页面变色
//1.用jquery实现页面变色
//鼠标移入
function test1(tr) {
//4.事件发生后的监听功能,增加class属性
$(tr).addClass("cc1");
}
//鼠标移出
function test2(tr) {
//4.事件发生后的监听功能,移除class类属性
$(tr).removeClass("cc1");
}
(2)用jquery实现下拉列表二级联动
//2.用jquery实现下拉列表二级联动
//(1)准备城市数据
var city = {
gz: ["贵阳", "遵义", "六盘水"],
hlj: ["哈尔滨", "齐齐哈尔", "大庆"],
gs: ["兰州", "庆阳", "天水"]
}
//(2)下拉列表二级联动的方法
function test3() {
// //(1)每次选择前先去清空县区下拉列表的内容
var citySelect = $("#city")
citySelect.text("");
// (2)获取省的值,jquery中用val
var cityValue = $("#province").val();
// (3)获取市的值(两种方法) city.["gz"];
var citys = city[cityValue];
//(4)遍历市的信息for(inner in 市的值citys)
for (index in citys) {
//a、为市的值封装成文本节点
//b、创建option标签对象
// c、将文本节点追加到option中
var option = $("<option></option>");
option.append(citys[index]);
// d、将option封装到select
$(citySelect).append(option);
}
}
//3.初始化方法,刷新页面时,自动选择第一个市信息
function init() {
//初始化方法,刷新页面时,自动选择第一个市信息
test3();
}
(3)实现自动添加数据,自动删除数据,动态表单
//3.实现自动添加数据,自动删除数据,动态表单
function input() {
//a.获取值
var name = $("#name").val();
var age = $("#age").val();
var salary = $("#salary").val();
var province = $("#province option:selected").text();
var city = $("#city option:selected").text();
//复选框
var inputCheckbox = $("<input/>");
//jquery中添加属性
inputCheckbox.attr("type", "checkbox");
//删除按钮
var inputButton = $("<input/>");
inputButton.attr("type", "button");
inputButton.attr("value", "删除")
inputButton.attr("onclick", "remove(this)")
//b.创建td标签,将值放入td中
var td0 = $("<td></td>");
var td1 = $("<td></td>");
var td2 = $("<td></td>");
var td3 = $("<td></td>");
var td4 = $("<td></td>");
var td5 = $("<td></td>");
td0.append(inputCheckbox)
td1.append(name);
td2.append(age);
td3.append(salary);
td4.append(province + city);
td5.append(inputButton)
//c.创建tr,将td放入tr
var tr = $("<tr></tr>");
tr.append(td0)
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.attr("onmouseover", "test1(this)")
tr.attr("onmouseout", "test2(this)")
//d.将tr放到tbody
$("#tbody").append(tr);
}
function remove(remove) {
//删除语法 父节点.removeChild(子节点)
//通过事件对象获取事件发生的源头
var tr = remove.parentNode.parentNode;
var parentNode = tr.parentNode;
parentNode.removeChild(tr);
}
(4)全选实现
$(function () {
//全选实现
$("#selectAll").click(function () {
//:checked 获取当前选中的单选按钮或者复选框
$(":checkbox:gt(0)").prop("checked", $("#selectAll").prop("checked"));
})
})
效果实现:
源代码在githee仓库:
程序员小王Gitee: https://gitee.com/wanghengjie563135/jquery.git
📌 作者:王恒杰
📃 更新: 2021.10.23
❌ 勘误: 无
📜 声明: 由于作者水平有限,本文有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!
🍅 欢迎点赞 👍 收藏 ⭐留言 📝