表格操作

最新推荐文章于 2022-04-13 15:08:41 发布

冬腊

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量143

点赞数

分类专栏：程序之路文章标签： python 表格 table

本文链接：https://blog.csdn.net/weixin_41772367/article/details/94585656

版权

程序之路专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一程序要求：
1 表格可以全选，反选和取消选择
2 表格进入编辑状态时，一旦选中某行，该行也会立即进入编辑状态
3 所有被勾选的行在进入编辑状态后，都可以重新输入值
4 输入的值在退出编辑状态后，显示在表格中

二页面样式截图
在这里插入图片描述

三代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .s1{background-color: #8b514d;color: #cccccc}
        .c1{height: 50px;line-height: 50px;}
        .using{background-color: green;}
    </style>
</head>
<body>
    <div class="c1">
        <input type="button" value="全选" class="iall"/>
        <input type="button" value="取消" class="icansle"/>
        <input type="button" value="反选" class="irever"/>
        <span class="s1">点这里编辑</span>
    </div>
    <div>
        <table border="1px">
            <thead>
                <tr>
                    <th>选择</th>
                    <th>名称</th>
                    <th>端口</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody class="t1">
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>ss</td>
                    <td>80</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>aa</td>
                    <td>82</td>
                    <td>在线</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>sss</td>
                    <td>87</td>
                    <td>离线</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>www</td>
                    <td>22</td>
                    <td>离线</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.iall').click(function () {
            $('.t1 :checkbox').prop('checked',true);
        });
        $('.icansle').click(function () {
            $('.t1 :checkbox').prop('checked',false);
        });
        $('.irever').click(function () {
            $('.t1 :checkbox').each(function () {
                var a = $(this).prop("checked")?false:true;
                $(this).prop("checked",a);
            })
        });
        $('.s1').click(function () {
            var a1 = $('.t1 :text');
            if (a1.length > 0){
                $(this).removeClass('using');
                a1.each(function () {
                    var b1 = $(this).val();
                    var c1 = $(this).parent().siblings().eq(2).children().eq(0).children().eq(1)[0].innerText;
                    console.log(b1);
                    console.log(c1);
                    $(this).parent().siblings().eq(2)[0].innerHTML = c1;
                    $(this).parent()[0].innerHTML = b1;
                    // $(this).remove();
                    // $(this).parent().siblings().eq(2).children().eq(0).remove();
                })
            }else {
                $(this).addClass('using');
                $('.t1 :checkbox').each(function () {
                var a = $(this).parent().siblings().first()[0].innerText;
                var c = $(this).parent().siblings().eq(2)[0].innerText;
                if (c == '在线'){var d = '离线'}else {var d = '在线'};
                if ($(this).prop('checked')){
                    $(this).parent().siblings().first()[0].innerHTML = "<input class='using1' type='text'/>";
                    $(this).parent().siblings().first().find('input').val(a);
                    $(this).parent().siblings().eq(2)[0].innerHTML = "<select>\n" +
                                                                     "<optgroup label=''></optgroup>\n" +
                                                                     "<option>"+c+"</option>\n" +
                                                                     "<option>"+d+"</option>\n" +
                                                                     "</select>";
            }
        });}});
        $(' :checkbox').click(function () {
            if ($(this).prop('checked') == false){
                if ($(this).parent().siblings().eq(0).children().hasClass('using1')){
                    var a = $(this).parent().siblings().eq(0).children().eq(0).val();
                    $(this).parent().siblings().eq(0)[0].innerText = a;
                    $(this).parent().siblings().eq(0).children().eq(0).remove();
                    var b = $(this).parent().siblings().eq(2).children().eq(0).children().eq(1).val();
                    $(this).parent().siblings().eq(2)[0].innerText = b;
                    $(this).parent().siblings().eq(2).children().eq(0).remove();
                }
            }else {if ($('.s1').hasClass('using')){
                var a = $(this).parent().siblings().first()[0].innerText;
                var c = $(this).parent().siblings().eq(2)[0].innerText;
                if (c == '在线'){var d = '离线'}else {var d = '在线'};
                if ($(this).prop('checked')){
                    $(this).parent().siblings().first()[0].innerHTML = "<input class='using1' type='text'/>";
                    $(this).parent().siblings().first().find('input').val(a);
                    $(this).parent().siblings().eq(2)[0].innerHTML = "<select>\n" +
                                                                     "<optgroup label=''></optgroup>\n" +
                                                                     "<option>"+c+"</option>\n" +
                                                                     "<option>"+d+"</option>\n" +
                                                                     "</select>";
            }}
            }
        })
    </script>
</body>
</html>

冬腊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格操作

一程序要求：1 表格可以全选，反选和取消选择2 表格进入编辑状态时，一旦选中某行，该行也会立即进入编辑状态3 所有被勾选的行在进入编辑状态后，都可以重新输入值4 输入的值在退出编辑状态后，显示在表格中二页面样式截图三代码<!DOCTYPE html><html lang="en"><head> <meta charset=...
复制链接

扫一扫