jQuery表格动态操作：添加、删除、样式切换、全选与单选

$(function() { var id = 4; //初始分类ID为4 $('#tab1').on('click', 'input[type='checkbox']', function() { //全选/取消全选 var isChecked = $(this).prop('checked'); $('input[type='checkbox']').prop('checked', isChecked); if (isChecked) { $('#checkAll').prop('checked', true); } else { $('#checkAll').prop('checked', false); } }); $('#checkAll').click(function() { //全选/取消全选 var isChecked = $(this).prop('checked'); $('input[type='checkbox']').prop('checked', isChecked); }); $('#tab1').on('click', 'a', function() { //删除行 $(this).parent().parent().remove(); updateId(); updateCheckAll(); }); $('input[value='添加表标题']').click(function() { //添加表标题 if ($('#tab1 h2').length === 0) { $('#tab1').before('

商品列表

'); } }); $('input[value='添加样式']').click(function() { //添加样式 $('#tab1').addClass('mc'); }); $('input[value='删除样式']').click(function() { //删除样式 $('#tab1').removeClass('mc'); }); $('input[value='切换样式']').click(function() { //切换样式 $('#tab1').toggleClass('mc'); }); $('input[value='添加']').click(function() { //添加行 var $tr = $('' + ++id + '分类名称分类描述删除'); $('#tab1').append($tr); updateCheckAll(); }); function updateId() { //更新分类ID $('#tab1 tr:gt(0)').each(function(index) { $(this).find('td:eq(1)').text(index + 1); }); id = $('#tab1 tr:last td:eq(1)').text(); } function updateCheckAll() { //更新全选状态 var isCheckedAll = true; $('#tab1 tr:gt(0)').each(function() { if (!$(this).find('td:eq(0) input').prop('checked')) { isCheckedAll = false; return false; } }); $('#checkAll').prop('checked', isCheckedAll); } });