89-90

服务端 2019-10-25 23:00:25 阅读次数: 0

文档处理

<!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>

enter description here

<!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>

enter description here

<!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追加到同级的上面

enter description here

enter description here

  • 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>

enter description here

enter description here

上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>

enter description here

上图：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>

enter description here

上图：成功将索引为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>

enter description here

enter description here

上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>

enter description here

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

猜你喜欢

转载自blog.51cto.com/daimalaobing/2445620
89
90
今日推荐
手把手教你用 LangChain 实现大模型 Agent
外星人入侵（python）
超全的免费chatGPT列表【建议收藏】
52.2k star! 自己部署gpt4free, 免费使用各种GPT
2024年 （第十届）全国大学生统计建模大赛优秀论文解析——中国经济发展与碳排放库兹涅茨曲线的验证研究
【自动驾驶技术】自动驾驶汽车AI芯片汇总——NVIDIA篇
7个免费的ChatGPT网站，给大家送上
Angular v18 正式发布！
【VMware】 vCenter Converter standalone 6.6.0正式版下载
开源日报 | Angular v18；大模型价格战下的推理优化；Mistral AI以开源模型瞄准美国市场；硅谷有自己的鲁迅
数学建模Matlab之数据预处理方法
充电桩---ISO15118协议详细介绍
周排行
慧测学习课件
Mscordacwks.dll/SOS.dll 调试归档
关于深度学习人工智能模型的探讨（二）（7）
Stop Using the text-indent:-9999px
Least Common Multiple（HDU - 1019 ）
Comparator接口的使用方法--例子
修改framework Camera的API,旋转摄像头
机器学习时代的“大数据+”：数据平台的设计与搭建
vue 项目部署到nginx
webstorm 常用插件集合
每日归档
更多
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)
2024-05-26(6)
2024-05-25(68)
2024-05-24(65)
2024-05-23(9)
2024-05-22(41)
2024-05-21(8)
2024-05-20(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022