1下面的HTML页面中加入jQuery 代码实现获取表格的动态添加、删除以及样式的操作效果如下图要求不能改动Html 源代码只能通过编写iQuery 代码来实现效果要求用尽量用、1点击添加表标题则在表的上面添加h2标签内容为商品列表并且居中再次点击添加表标题时不能重复添加。2点击添加样式则为表格添加样式 mc3点击删除样式则删除样式 mc4点击切换则切换样式 mc。5点击全选复选框所有的行复选框都

<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