jQuery 表格操作：动态添加、删除、样式控制、全选与行选择
<html>
<head>
<style>
.mc {
border: 2px solid red;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
// 添加表标题
var hasTitle = false;
$("input[value='添加表标题']").click(function() {
if (!hasTitle) {
var h2 = $("<h2>商品列表</h2>").css("text-align", "center");
$("#tab1").before(h2);
hasTitle = 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() {
var isChecked = $(this).prop("checked");
$("td:first input[type='checkbox']").prop("checked", isChecked);
});
// 行复选框
$("td:first input[type='checkbox']").click(function() {
var isChecked = $(this).prop("checked");
if (!isChecked) {
$("th:first input[type='checkbox']").prop("checked", false);
} else {
var allChecked = true;
$("td:first input[type='checkbox']").each(function() {
if (!$(this).prop("checked")) {
allChecked = false;
return false;
}
});
if (allChecked) {
$("th:first input[type='checkbox']").prop("checked", true);
}
}
});
// 添加行
$("input[value='添加']").click(function() {
var lastTr = $("#tab1 tr:last");
var lastId = parseInt(lastTr.find("td:eq(1)").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").append(newRow);
// 全选状态
var isChecked = $("th:first input[type='checkbox']").prop("checked");
newRow.find("td:first input[type='checkbox']").prop("checked", isChecked);
});
// 删除行
$("#tab1").on("click", "a", function() {
$(this).closest("tr").remove();
// 全选状态
var allChecked = true;
$("td:first input[type='checkbox']").each(function() {
if (!$(this).prop("checked")) {
allChecked = false;
return false;
}
});
$("th:first input[type='checkbox']").prop("checked", allChecked);
// 重新编号
$("#tab1 tr:gt(0)").each(function(index) {
$(this).find("td:eq(1)").text(index + 1);
});
});
});
</script>
</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/nuJe 著作权归作者所有。请勿转载和采集!