jQuery 表格操作：动态添加、删除、样式切换、全选、行选中
<!DOCTYPE html>
<html>
<head>
<title>表格操作</title>
<style>
mc {
border: 2px solid red;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
// 添加表标题
var title = true;
$('input[value='添加表标题']').click(function() {
if (title) {
$('#tab1').before('<h2 style='text-align:center;'>商品列表</h2>');
title = false;
}
});
<pre><code> // 添加样式
$('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 checked = $(this).prop('checked');
$('td:first input[type='checkbox']').prop('checked', checked);
});
// 行复选框
$('td:first input[type='checkbox']').click(function() {
var all_checked = true;
$('td:first input[type='checkbox']').each(function() {
if (!$(this).prop('checked')) {
all_checked = false;
return false; // 等价于 break
}
});
$('th:first input[type='checkbox']').prop('checked', all_checked);
});
// 添加行
$('input[value='添加']').click(function() {
var last_id = parseInt($('#tab1 tr:last td:eq(1)').text());
var new_id = last_id + 1;
var new_html = '<tr><td><input type='checkbox'></td><td>' + new_id + '</td><td>分类名称</td><td>分类描述</td><td><a href='#'>删除</a></td></tr>';
$('#tab1 tr:last').after(new_html);
$('th:first input[type='checkbox']').prop('checked', false);
});
// 删除行
$('#tab1').on('click', 'a', function() {
$(this).closest('tr').remove();
var all_checked = true;
$('td:first input[type='checkbox']').each(function() {
if (!$(this).prop('checked')) {
all_checked = false;
return false; // 等价于 break
}
});
$('th:first input[type='checkbox']').prop('checked', all_checked);
});
});
</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/nuG5 著作权归作者所有。请勿转载和采集!