jquery 操作列表

最新推荐文章于 2022-04-10 16:52:52 发布

a1057796789

最新推荐文章于 2022-04-10 16:52:52 发布

阅读量907

点赞数

本文链接：https://blog.youkuaiyun.com/a1057796789/article/details/80586941

版权

删除单行数据,重新排列序号,没有实现,编辑功能没有实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.4);
    z-index: 999;
    }
    .modal {
    width: 600px;
    height: 400px;
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -300px;
    margin-top: -200px;
    z-index: 1000;
    }
    .hide {
    display: none;
    }
  </style>
</head>
<body>
<input type="button" value="添加" class="add">
<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alex</td>
            <td>吹牛逼</td>
            <td><input type="button" value="编辑" class="edit"></td>
            <td><input type="button" value="删除" class="del"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>egon</td>
            <td>蹦迪</td>
            <td><input type="button" value="编辑" class="edit"></td>
            <td><input type="button" value="删除" class="del"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>梁树东</td>
            <td>捧哏</td>
            <td><input type="button" value="编辑" class="edit"></td>
            <td><input type="button" value="删除" class="del"></td>
        </tr>
    </tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
  <label for="i1">姓名</label>
  <input id="i1" type="text">
   <label for="i2">爱好</label>
  <input id="i2" type="text">
  <input type="button" id="i3" value="关闭">
  <input type="button" id="i4" value="提交">
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('#i3').click(function () {
        $('.cover').addClass('hide');
        $('.modal').addClass('hide');
        $('#i1').val('');
        $('#i2').val('');
    });
    $('#i4').click(function () {
        $('.cover').addClass('hide');
        $('.modal').addClass('hide');
        var num = $('tbody tr:last').index() + 2;
        var change_name = $('#i1').val();
        var change_hobby = $('#i2').val();
//        $(this).parent().siblings().eq(1).text(change_name);
//        $(this).parent().siblings().eq(2).text(change_hobby);
        $('tbody').append($('tbody tr:last').clone(true));
        $('tbody tr:last').children().eq(0).text(num);
        $('tbody tr:last').children().eq(1).text(change_name);
        $('tbody tr:last').children().eq(2).text(change_hobby);
//        $('tr').eq(1).clone().children().eq(2).text(change_hobby);
//        $('tbody').append($('tr').eq(1).clone())
        $('#i1').val('');
        $('#i2').val('');
    });
    $('.edit').click(function () {
        $('.cover').removeClass('hide');
        $('.modal').removeClass('hide');
        var num = $(this).parent().siblings().eq(0).text();
        var name = $(this).parent().siblings().eq(1).text();
        var hobby = $(this).parent().siblings().eq(2).text();
        $('#i1').val(name);
        $('#i2').val(hobby);
        var current_index=$(this).index();
        console.log(current_index);
//        var new_name =

    });
    $('.del').click(function () {
        $(this).parent().parent().remove();
//        删除同时重新排列序号
//        var len=$('tbody tr').length;
//        for (var i=1;i<len;i++){
//            $('table tr:eq('+i+') td:first').text(i);
//        }
    });
    $('.add').click(function () {
        $('.cover').removeClass('hide');
        $('.modal').removeClass('hide');
    });
</script>
</body>
</html>