JavaScript（15）：表格行之增删改

最新推荐文章于 2022-12-16 15:12:35 发布

仲永要加油呀

最新推荐文章于 2022-12-16 15:12:35 发布

阅读量183

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_31655771/article/details/80695967

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格行之增删改</title>
    <!--编辑功能在s5中并没有被实现，在该s5_new中被实现了-->
    <style>
        .hide{
            display: none;
        }
        .mantle{
            position: fixed;
            /*必须用position: fixed;不然遮罩层显示不出来*/
            top: 0;
            left: 0;
            right:0;
            bottom: 0;
            /*上下左右四个都为0，是为了把遮盖层覆盖到整个窗口上*/
            background-color: black;
            opacity: 0.6;
            /*透明度*/
            z-index: 9;
        }
        .lotus{
            position: fixed;
            /*必须用position: fixed;不然遮罩层显示不出来*/
            top: 50%;
            left: 50%;
            /*两个50%保证荷花框（自己取的名字）的左上顶点在窗口的正中*/
            width: 300px;
            height: 200px;
            margin-left: -150px;
            margin-top: -100px;
            /*通过外边距将荷花框移到窗口的正中间*/
            background-color: #eeeeee;
            z-index: 10;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>城市</th>
                <th>特产</th>
                <th>美景</th>
                <!--th是指表格表头，要加粗-->
            </tr>
        </thead>
        <tbody id="tb">
            <tr id="tr1">
                <td target="city">武汉</td>
                <td target="food">热干面</td>
                <td target="beauty">黄鹤楼</td>
                <td class="edit">编辑</td>
                <td class="del">删除</td>
                <!--td指表格的单元格，正常字体显示即可-->
            </tr>
            <tr id="tr2">
                <td target="city">海口</td>
                <td target="food">清补凉</td>
                <td target="beauty">骑楼</td>
                <td class="edit">编辑</td>
                <td class="del">删除</td>
            </tr>
            <tr id="tr3">
                <td target="city">重庆</td>
                <td target="food">火锅</td>
                <td target="beauty">洪崖洞</td>
                <td class="edit">编辑</td>
                <td class="del">删除</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="添加" id="add">

    <div class="lotus hide">
            <div>
                <input type="text" id="city">
            </div>
            <div>
                <input type="text" id="food">
            </div>
            <div>
                <input type="text" id="beauty">
            </div>
            <input type="button" value="确定" id="con">
            <input type="button" value="取消" id="can">
    </div>
    <div class="mantle hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        var isedit = false;
//        设置荷花框（模态对话框）出现原因的标记，默认为非
        var modifying_tr_id;
//        声明待修改<tr>标签的id

//        可以用delegate对未来元素造成影响，但是我不会用。。
        $('.edit').click(function () {
            $('.lotus').removeClass('hide');
            $('.mantle').removeClass('hide');
            isedit = true;
//            对模态对话框产生的原因是否为“编辑”进行标记（不为“编辑”的话肯定就是“添加”所产生的了）
            modifying_tr_id = $(this).parent().attr('id');
//            获取需要编辑行所对应标签的id值
            $(this).prevAll().each(function () {
                var td_text = $(this).text();
                var tar = $(this).attr('target');
                $('#'+tar).val(td_text)
            })
//            将原表格某行的信息传到荷花框的输入框中，以待修改
        });

//        $('.del').on('click',function () {
//            var c = confirm("你确定要删除吗？");
//            if (c){
//                $(this).parent().remove();
//            }
//        });

//        该函数无法对后来的增加的表格行进行删除操作，据说不用click关联而用delegate进行关联可以实现，但我试了却并未成功
        $('.del').click(function () {
            var c = confirm("你确定要删除吗？");
            if (c){
                $(this).parent().remove();
            }
        });

//        该事件实现的是：荷花框的确认键被按下后，先根据isedit判断是否为编辑操作，若是，则通过待修改的<tr>标签的id值找到
//        该标签并进行innerHTML内容的修改，修改完毕后应将isedit重置为false，以免影响以后的操作；若不是，则为添加操作导致
//        的荷花框出现，可以首先通过DOM操作创建一个<tr>标签，然后修改该<tr>标签的innerHTML内容，之后再将其追加入<tbody>
//        标签中即可
        $('#con').click(function () {
            var c = $('#city').val();
            var f = $('#food').val();
            var b = $('#beauty').val();
            if (isedit){
                $('#'+modifying_tr_id)[0].innerHTML='<tr id="tr2">\n' +
//                        对于$()，括号中的只需要是字符串即可，所以上局只需要写成$('#'+modifying_tr_id)即可
//                        至于加后缀[0]，是为了将jQuery对象转换为DOM对象以便获取
                    '                <td>'+c+'</td>\n' +
                    '                <td>'+f+'</td>\n' +
                    '                <td>'+b+'</td>\n' +
                    '                <td class="edit">编辑</td>\n' +
                    '                <td class="del">删除</td>\n' +
                    '            </tr>';
                isedit=false;
            }else {
                var tr = document.createElement('tr');
                tr.innerHTML='<tr id="tr2">\n' +
                        '                <td>'+c+'</td>\n' +
                        '                <td>'+f+'</td>\n' +
                        '                <td>'+b+'</td>\n' +
                        '                <td class="edit">编辑</td>\n' +
                        '                <td class="del">删除</td>\n' +
                        '            </tr>';
                $('#tb').append(tr);
//               表示<tr>会成为$('#tb')的子标签，而非下一个兄弟标签！！
            }
            $('.lotus :text').val('');
            $('.lotus').addClass('hide');
            $('.mantle').addClass('hide');
        });

        $('#can').click(function () {
            $('.lotus').addClass('hide');
            $('.mantle').addClass('hide');
            if(isedit){
                isedit = false;
            }
            var wo = $('.lotus :text').val("");
        });

        $('#add').click(function () {
            $('.lotus').removeClass('hide');
            $('.mantle').removeClass('hide');
            $('.lotus :text').val("");
//            执行添加操作时，为方便用户操作，需要先将荷花框中的所有输入框清空
        })
    </script>
</body>
</html>

仲永要加油呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（15）：表格行之增删改

示例代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格行之增删改&lt;/title&gt; &lt;!--编辑功能在s5中并没有被实现，在该s5_new中被实现了--&amp
复制链接

扫一扫