jQuery表格动态操作：添加、删除、样式切换和全选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
.mc {
border: 2px solid red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var isAdded = false; //是否已经添加过表标题
var isCheckedAll = false; //全选复选框是否选中
<pre><code> //添加表标题
$("input[value='添加表标题']").click(function(){
if(!isAdded){
$("#tab1").before("<h2>商品列表</h2>");
$("#tab1").prev().css("text-align","center");
isAdded = true;
}
});
//添加样式
$("input[value='添加样式']").click(function(){
$("#tab1").addClass("mc");
});
//删除样式
$("input[value='删除样式']").click(function(){
$("#tab1").removeClass("mc");
});
//切换样式
$("input[value='切换样式']").click(function(){
$("#tab1").toggleClass("mc");
});
//全选复选框
$("th:first input[type='checkbox']").click(function(){
if($(this).prop("checked")){
isCheckedAll = true;
$("td:first-child input[type='checkbox']").prop("checked",true);
}else{
isCheckedAll = false;
$("td:first-child input[type='checkbox']").prop("checked",false);
}
});
//行复选框
$("td:first-child input[type='checkbox']").click(function(){
if($(this).prop("checked")){
if($("td:first-child input[type='checkbox']:checked").length == $("td:first-child input[type='checkbox']").length){
$("th:first input[type='checkbox']").prop("checked",true);
isCheckedAll = true;
}
}else{
$("th:first input[type='checkbox']").prop("checked",false);
isCheckedAll = false;
}
});
//添加行
$("input[value='添加']").click(function(){
var lastId = parseInt($("#tab1 tr:last-child td:nth-child(2)").text());
var newId = lastId + 1;
var newRow = "<tr><td><input type='checkbox'></td><td>" + newId + "</td><td>新分类</td><td>新描述</td><td><a href=''>删除</a></td></tr>";
$("#tab1 tr:last-child").before(newRow);
if(isCheckedAll){
$("td:first-child input[type='checkbox']:last").prop("checked",true);
}
});
//删除行
$("#tab1").on("click","a",function(){
$(this).parent().parent().remove();
if(isCheckedAll){
if($("td:first-child input[type='checkbox']:checked").length == 0){
$("th:first input[type='checkbox']").prop("checked",false);
isCheckedAll = false;
}
}
});
});
</script>
</code></pre>
</head>
<body>
<table id="tab1" border="1" width="500" align="center">
<tr><td colspan="5">分类名称:<input type="text"><br>分类描述:<input type="text" /></td></tr>
<tr>
<td colspan="5">
<input type="button" value="添加"/>
<input type="button" value="添加表标题">
<input type="button" value="添加样式">
<input type="button" value="删除样式">
<input type="button" value="切换样式">
</td>
</tr>
<tr>
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nuHw 著作权归作者所有。请勿转载和采集!