89-90

2024-03-16 15:26:52

文档处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();     //获取input中输入的值
            var temp = "<li>" + v + "</li>";    //拼接li标签和输入的值
            $('#u1').append(temp);      //将temp追加到li标签的最下面
        })
    </script>

</body>
</html>

89-90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input id="t1" type="text">
    <input id="a1" type="button" value="添加">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').prepend(temp);   //prepend向最前面追加
        })
    </script>

</body>
</html>

89-90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').after(temp);   //after是追加到ul标签下面，与ul同级
    })
</script>

</body>
</html>

代码说明：

after追加到同级的后面；
before追加到同级的上面

89-90

89-90

  • remove
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#ul li').eq(index).remove();
    })

</script>

</body>
</html>

89-90

89-90

上2图：我们删除索引为2的li标签（从下向上）。

  • empty
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#u1 li').eq(index).empty();
    })

</script>

</body>
</html>

89-90

上图：empty清空数据，是从上向下获取索引的

  • clone
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input id="t1" type="text">
<input id="a1" type="button" value="添加">
<input id="a2" type="button" value="删除">
<input id="a3" type="button" value="复制">
<ul id="u1">
    <li>1</li>
    <li>2</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    $('#a1').click(function () {
        var v = $('#t1').val();
        var temp = "<li>" + v + "</li>";
        $('#u1').prepend(temp);
    });

    $('#a2').click(function () {
        var index = $('#t1').val();
        $('#u1 li').eq(index).empty();
    });

    $('#a3').click(function () {
        var index = $('#t1').val();
        var v = $('#u1 li').eq(index).clone();  //克隆一份数据
        $('#u1').append(v);     //将克隆的数据添加到最后
    })

</script>

</body>
</html>

89-90

上图：成功将索引为0的数据（123）复制并添加到最后。

模态编辑框

  • 删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>

</head>
<body>

<a onclick="addElement();">添加</a>
<table border="1">
    <tr>
        <td target="hostname">1.1.1.11</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>  <!--定义del-->
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.12</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.13</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.14</td>
        <td target="port">80</td>
        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>

<div class="model hide">
    <div>
        <input name="hostname" type="text">
        <input name="port" type="text">

    </div>
    <div>
        <input type="button" value="取消" onclick="cancleModel();">
    </div>
</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>

    $('.del').click(function () {
        $(this).parent().parent().remove();
    });     // 点击del标签后，获取tr标签，并将其remove掉

    function addElement() {
        $(".model,.shadow").removeClass("hide");
    }
    function cancleModel() {
        $(".model,.shadow").addClass("hide");
        $('.model input[type="text"]').val("");
    }

    $('.edit').click(function () {
        $(".model,.shadow").removeClass("hide");

        var tds = $(this).parent().prevAll();
        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();

            var a1 = '.model input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2;
            $(temp).val(text);
        })
    })

</script>

</body>
</html>

89-90

89-90

上2图：删除了七中两条内容

  • 添加确认
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .model{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }

        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

    </style>

</head>
<body>

<a onclick="addElement();">添加</a>
<table border="1" id="tb">                      //定义id="tb"
    <tr>
        <td target="hostname">1.1.1.11</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.12</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.13</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
    <tr>
        <td target="hostname">1.1.1.14</td>
        <td target="port">80</td>

        <td>
            <a class="edit">编辑</a> | <a class="del">删除</a>
        </td>
    </tr>
</table>

<div class="model hide">
    <div>
        <input name="hostname" type="text">
        <input name="port" type="text">

    </div>

    <div>
        <input type="button" value="取消" onclick="cancleModel();">
        <input type="button" value="确定" onclick="confirmModel();">        //添加确认按钮
    </div>

</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>

    $('.del').click(function () {
        $(this).parent().parent().remove();
    });

    function confirmModel() {

        var tr = document.createElement('tr');  //通过dom创建tr标签

        var td1 = document.createElement('td'); //通过dom创建td标签
        td1.innerHTML = "11.11.11.11";      //设置td1内容

        var td2 = document.createElement('td');
        td2.innerHTML = "8001";

        $(tr).append(td1);      //将建立好的td1标签和内容添加到tr标签中
        $(tr).append(td2);

        $('#tb').append(tr);    //将tr添加到tb表格中

        $(".model, .shadow").addClass('hide');   //点击确定后隐藏弹窗

    }

    function addElement() {
        $(".model,.shadow").removeClass("hide");
    }
    function cancleModel() {
        $(".model,.shadow").addClass("hide");
        $('.model input[type="text"]').val("");
    }

    $('.edit').click(function () {
        $(".model,.shadow").removeClass("hide");

        var tds = $(this).parent().prevAll();
        tds.each(function () {
            var n = $(this).attr('target');
            var text = $(this).text();

            var a1 = '.model input[name="';
            var a2 = '"]';
            var temp = a1 + n + a2;
            $(temp).val(text);
        })
    })

</script>

</body>
</html>

89-90

上图：因为我们在代码中设定了内容，所以直接点确定就会添加11.11.11.11和8001到表格中。

上一篇：89. 格雷编码


下一篇：【C语言】利用二维数组输出成绩