最近学了JS和JQuery，并且写出了列表的动态增加和删除还有修改的操作，现在我就来分享给大家
演示地址
点击的时候页面可能没效果,如果出现不能点击的话退出重进,再点一下下面的链接就好了。
JS/JQuery代码
tr颜色
// 颜色
$(".list tr:odd").addClass("odd");
全选/取消全选事件
// 多选框的点击操作
// 默认样式
$(".list th:first").append("<label for='check' id='show'>全选</label>");
$("#check").click(function() {
if(this.checked) {
$("#show").replaceWith("<label for='check' id='show'>已全选</label>");
$("tbody :checkbox").prop("checked", true);
} else {
$("tbody :checkbox").prop("checked", false);
$("#show").replaceWith("<label for='check' id='show'>已取消全选</label>");
}
});
列表HTML代码
<div class="list">
<form>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="check" name="check" /></th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>第一行</td>
<td>第一行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>第二行</td>
<td>第二行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>第三行</td>
<td>第三行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>第四行</td>
<td>第四行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>第五行</td>
<td>第五行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
新增JQuery代码
// 点击新增时显示新增列表
$("input:button:first").click(function() {
$("#addBox").slideDown(1000);
});
// 点取消新增时隐藏新增列表
$("#addBox input:reset:last-child").click(function() {
$("#addBox").slideUp(1000);
});
// 增加 点击事件
$("#addBox input:reset:first-child").click(function() {
$(".list tr:odd").removeClass("odd"); // 新增前去除颜色
// 先复制一份tbody下的tr
var trDom = $(".list tbody tr:first").clone(true);
$(".list tbody").append(trDom); // 写入到tbody内
// 将输入的内容写入到列表
var textDom = $("#addBox input:text"); // 获取文本框
var tdDom = $(".list tbody tr:last td");
for(var i = 0; i < textDom.length; i++) {
var content = textDom.eq(i).val();
if(content == ""){
tdDom.parents("tr").remove();// 如果输入的有空值 删除刚才添加的内容
$(".list tr:odd").addClass("odd"); // 添加颜色
alert("请输入完整");
return;// 提示输入完整并结束程序
}
tdDom.eq(i + 1).text(content);
}
$(".list tr:odd").addClass("odd"); // 新增后添加颜色
});
新增HTML代码
<input type="button" value="新增" />
<div id="addBox">
<form>
<table>
<tr>
<th colspan="2">新增列表</th>
</tr>
<tr>
<td>分类的ID:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的名称:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的描述:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="新增一个" />
<input type="reset" value="取消新增" />
</td>
</tr>
</table>
</form>
</div>
删除JQuery代码
// 删除操作
$(".list tbody td a:last-child").click(function() {
var isDel = confirm("确定真的要删除吗?");
if(isDel) {
if($(".list tr").length > 2) {
$(".list tr:odd").removeClass("odd"); // 删除前去除颜色
$(this).parents("tr").remove();
$(".list tr:odd").addClass("odd"); // 删除后添加颜色
} else {
alert("最少保留一条数据");
}
}
});
修改JQuery代码
// 修改点击事件
$(".list tbody td a:first-child").click(function() {
// 点击修改时显示修改列表
$("#updBox").slideDown(1000);
// 取消事件 --> 取消上一次修改的点击事件
$("#updBox input:reset:first-child").off("click");
var trDom = $(this).parents("tr");// 修改当前的tr
update(trDom); // 绑定修改事件
});
// 点击取消修改之后也隐藏修改列表
$("#updBox input:reset:last-child").click(function(){
$("#updBox").slideUp(1000);
});
修改调用的方法
// 修改操作
function update(trDom) {
$("#updBox input:reset:first-child").click(function() {
// 设置修改点击时间
var textDom = $("#updBox input:text"); // 获取文本框
for(var i = 0; i < textDom.length; i++) {
// 将文本框的内容替换到修改的地方-->trDom
var content = textDom.eq(i).val();
if(content == ""){
alert("请输入完整");
return; // 提示输入完整并结束程序
}
trDom.find("td").eq(i + 1).text(content);// 修改tr下的td内的内容
}
// 修改完毕之后隐藏修改列表
$("#updBox").slideUp(1000);
});
}
修改HTML代码
<div id="updBox">
<form>
<table>
<tr>
<th colspan="2">修改列表</th>
</tr>
<tr>
<td>分类的ID:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的名称:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的描述:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="修改一个" />
<input type="reset" value="取消修改" />
</td>
</tr>
</table>
</form>
</div>
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<style>
td,
th {
width: 120px;
text-align: center;
}
.odd {
background-color: lightsalmon;
}
#addBox {
display: none;
width: 320px;
float: left;
background-color: lightslategrey;
}
#updBox {
display: none;
width: 320px;
float: left;
background-color: lightslategrey;
}
#addBox table,#updBox table{
margin: 0 auto;
}
#addBox th,#updBox th{
color: red;
}
</style>
<script>
$(function() {
// 颜色
$(".list tr:odd").addClass("odd");
// 多选框的点击操作
// 默认样式
$(".list th:first").append("<label for='check' id='show'>全选</label>");
$("#check").click(function() {
if(this.checked) {
$("#show").replaceWith("<label for='check' id='show'>已全选</label>");
$("tbody :checkbox").prop("checked", true);
} else {
$("tbody :checkbox").prop("checked", false);
$("#show").replaceWith("<label for='check' id='show'>已取消全选</label>");
}
});
// 点击新增时显示新增列表
$("input:button:first").click(function() {
$("#addBox").slideDown(1000);
});
// 点取消新增时隐藏新增列表
$("#addBox input:reset:last-child").click(function() {
$("#addBox").slideUp(1000);
});
// 增加 点击事件
$("#addBox input:reset:first-child").click(function() {
$(".list tr:odd").removeClass("odd"); // 新增前去除颜色
// 先复制一份tbody下的tr
var trDom = $(".list tbody tr:first").clone(true);
$(".list tbody").append(trDom); // 写入到tbody内
// 将输入的内容写入到列表
var textDom = $("#addBox input:text"); // 获取文本框
var tdDom = $(".list tbody tr:last td");
for(var i = 0; i < textDom.length; i++) {
var content = textDom.eq(i).val();
if(content == ""){
tdDom.parents("tr").remove();// 如果输入的有空值 删除刚才添加的内容
$(".list tr:odd").addClass("odd"); // 添加颜色
alert("请输入完整");
return;// 提示输入完整并结束程序
}
tdDom.eq(i + 1).text(content);
}
$(".list tr:odd").addClass("odd"); // 新增后添加颜色
});
// 删除操作
$(".list tbody td a:last-child").click(function() {
var isDel = confirm("确定真的要删除吗?");
if(isDel) {
if($(".list tr").length > 2) {
$(".list tr:odd").removeClass("odd"); // 删除前去除颜色
$(this).parents("tr").remove();
$(".list tr:odd").addClass("odd"); // 删除后添加颜色
} else {
alert("最少保留一条数据");
}
}
});
// 修改点击事件
$(".list tbody td a:first-child").click(function() {
// 点击修改时显示修改列表
$("#updBox").slideDown(1000);
// 取消事件 --> 取消上一次修改的点击事件
$("#updBox input:reset:first-child").off("click");
var trDom = $(this).parents("tr");// 修改当前的tr
update(trDom); // 绑定修改事件
});
// 点击取消修改之后也隐藏修改列表
$("#updBox input:reset:last-child").click(function(){
$("#updBox").slideUp(1000);
});
});
// 修改操作
function update(trDom) {
$("#updBox input:reset:first-child").click(function() {
// 设置修改点击事件
var textDom = $("#updBox input:text"); // 获取文本框
for(var i = 0; i < textDom.length; i++) {
// 将文本框的内容替换到修改的地方-->trDom
var content = textDom.eq(i).val();
if(content == ""){
alert("请输入完整");
return; // 提示输入完整并结束程序
}
trDom.find("td").eq(i + 1).text(content);// 修改tr下的td内的内容
}
// 修改完毕之后隐藏修改列表
$("#updBox").slideUp(1000);
});
}
</script>
</head>
<body>
<input type="button" value="新增" id="add" />
<div class="list">
<form>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="check" name="check" /></th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>第一行</td>
<td>第一行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>第二行</td>
<td>第二行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>第三行</td>
<td>第三行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>第四行</td>
<td>第四行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>第五行</td>
<td>第五行</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="addBox">
<form>
<table>
<tr>
<th colspan="2">新增列表</th>
</tr>
<tr>
<td>分类的ID:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的名称:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的描述:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="新增一个" />
<input type="reset" value="取消新增" />
</td>
</tr>
</table>
</form>
</div>
<div id="updBox">
<form>
<table>
<tr>
<th colspan="2">修改列表</th>
</tr>
<tr>
<td>分类的ID:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的名称:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>分类的描述:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="reset" value="修改一个" />
<input type="reset" value="取消修改" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
