jquery实现添加删除表格

谁借莪１个温暖的怀抱￠ 2022-09-14 09:49 243阅读 0赞

**css:**

**html:**

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/ 
    <script src="./js/jquery.js"></script>
        <script>
            // 点击添加按钮 将输入框的值 添加到对应的tr中
            $('button').eq(0).click(function () {
                var tr = $('<tr>\
                    <td>\
                        <input type="checkbox" name="" id="">\
                    </td>\
                    <td>' + $(':text').eq(0).val() + '</td>\
                    <td>' + $(':radio:checked').val() + '</td>\
                    <td>' + $(':text').eq(1).val() + '</td>\
                </tr>')
                console.log(tr);
                $('tbody').append(tr);
            });
            // 点击删除按钮 将选中的行 删掉
            $('button').eq(1).click(function () {
                console.log($('tbody :checked').parents('tr').remove());
            });
            /* 
                点击tbody中的每一个复选框 如果选中的个数 和 总个数一样 全选选中 否则全选不选中
            */
            $('tbody').on('click', ':checkbox', function () {
                // console.log($('tbody :checkbox:checked'),$('tbody :checkbox'));
                if ($('tbody :checkbox:checked').length == $('tbody :checkbox').length) {
                    $('thead :checkbox').prop('checked',true);
                }else{
                    $('thead :checkbox').prop('checked',false);
                };
    
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4dc2001186d8456583da06909cca5e45.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/7ca0d33efb68465f81a6d4134665d7f5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/20211004173421750.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5bG_SA==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/611eee0f3b714a4f82bbb09fef2000c9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/063d455f10684216a0beec9aa1a92671.png