jQuery实现表格栏内的增删改操作

最新推荐文章于 2024-04-26 16:47:03 发布

คิดถึง643

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量68

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_72426331/article/details/127700416

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用jQuery实现表格栏内增删改操作</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 9;
        }
        .modal {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            background-color: white;
            z-index: 100;
            margin-top: -150px;
            margin-left: -200px;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>

<button id="add">新增</button>

<table border="1" style="border-collapse:collapse">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Monicx</td>
        <td>reading</td>
        <td>
            <input type="button" value="编辑" class="edit">
            <input type="button" value="删除" class="delete">
        </td>
    </tr>

    </tbody>
</table>

<!--模态框-->
<div class="cover hide"></div>
<div class="modal hide">
    <label for="username">用户名：</label>
    <p><input type="text" id="username"></p>
    <label for="hobby">爱  好</label>
    <p><input type="text" id="hobby"></p>
    <p>
        <button id="submit">提交</button>
        <button id="cancel">取消</button>
    </p>
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    //隐藏模态框
    function hideModal() {
        $(".modal,.cover").addClass('hide');
    }
    //模态框去掉隐藏
    function showModal() {
        $(".modal,.cover").removeClass('hide');
    }

    //点击新增按钮
    $('#add').on('click', function () {
        showModal();

    });
    //点击取消按钮
    $('#cancel').click(function () {
        hideModal();
        //清空输入框中的内容
        $('#username,#hobby').val('')
    });

    //点击编缉按钮
    $('table').on('click', '.edit', function () {
        //获取点击编缉按钮所在的行的子元素
        let $curTdsEle = $(this).parent().parent().children();
        //将所得到的子元素对象放到临时数据中
        $('.modal').data('tr', $curTdsEle);
        showModal();

        //将编织按键所在行的内容显示在模态框的输入框中
        let name=$curTdsEle[1].innerText;
        let hobby=$curTdsEle[2].innerText;
//        let name=$($curTdsEle[1]).text();
//        let hobby=$($curTdsEle[2]).text();
        $('#username').val(name);
        $('#hobby').val(hobby);
    });

    //点击提交按钮
    $('#submit').on('click', function () {
        //获取模态框中的输入内容
        let name = $('#username').val();
        let hobby = $('#hobby').val();
        if ($('.modal').data('tr') === undefined) {
            let trEle = document.createElement('tr');
            let td1Ele = document.createElement('td');
            td1Ele.innerText = $('tbody tr').length + 1;
            trEle.append(td1Ele);
            let td2Ele = document.createElement('td');
            td2Ele.innerText = name;
            trEle.append(td2Ele);
            let td3Ele = document.createElement('td');
            td3Ele.innerText = hobby;
            trEle.append(td3Ele);
            let td4Ele = document.createElement('td');
            td4Ele.innerHTML = ` <input type="button" value="编辑" class="edit">
            <input type="button" value="删除" class="delete">`;
            trEle.append(td4Ele);
            $('tbody').append(trEle);
            hideModal();
        }else {
            let $tdsEle=$('.modal').data('tr');
            $($tdsEle[1]).text(name);
            $($tdsEle[2]).text(hobby);
            $('.modal').removeData('tr');
            hideModal();
            $('#username,#hobby').val('')

        }

    });
    //点击删除按钮
    $('table').on('click', '.delete', function () {
        //找到这个删除按钮所在的tr元素
        let $curentTr = $(this).parent().parent();
        //找到这个tr元素下的所有tr元素
        let $nexAllTr = $curentTr.nextAll();
        //将这个tr下的所有tr的序号都减1
        $nexAllTr.each(function () {
            let n = $(this).children().first().text();
            alert(n);
            $(this).children().first().text(n - 1);
        });
        //删除这个该tr元素。
        $curentTr.remove();
    })
    
</script>
</body>
</html>