jQuery 实现表格动态操作：添加、删除、样式切换和全选

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
    //添加表标题
    var flag=false;
    $('input[value="添加表标题"]').click(function(){
        if(!flag){
            var h2=$('<h2>商品列表</h2>');
            h2.css('text-align', 'center');
            $('#tab1').before(h2);
            flag=true;
        }
    });
    //添加样式
    $('input[value="添加样式"]').click(function(){
        $('#tab1').addClass('mc');
    });
    //删除样式
    $('input[value="删除样式"]').click(function(){
        $('#tab1').removeClass('mc');
    });
    //切换样式
    $('input[value="切换样式"]').click(function(){
        $('#tab1').toggleClass('mc');
    });
    //全选
    $('th input[type="checkbox"]').click(function(){
        var checked=$(this).prop('checked');
        $('td input[type="checkbox"]').prop('checked', checked);
    });
    $('td input[type="checkbox"]').click(function(){
        var allChecked=$('td input[type="checkbox"]').length==$('td input[type="checkbox"]:checked').length;
        $('th input[type="checkbox"]').prop('checked', allChecked);
    });
    //添加行
    $('input[value="添加"]').click(function(){
        var tr=$('#tab1 tr').last().clone();
        var id=parseInt(tr.find('td').eq(1).text())+1;
        tr.find('td').eq(0).html('<input type="checkbox">');
        tr.find('td').eq(1).text(id);
        tr.find('td').eq(2).text('');
        tr.find('td').eq(3).text('');
        tr.find('td').eq(4).html('<a href="">删除</a>');
        $('#tab1').append(tr);
    });
    //删除行
    $('#tab1').on('click', 'td a', function(){
        $(this).parents('tr').remove();
        var allChecked=$('td input[type="checkbox"]').length==$('td input[type="checkbox"]:checked').length;
        $('th input[type="checkbox"]').prop('checked', allChecked);
    });
});
</script>