jquery内容操作-增删改

最新推荐文章于 2022-10-27 08:00:00 发布

YoungfreeFJS

最新推荐文章于 2022-10-27 08:00:00 发布

阅读量249

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq471011042/article/details/79339322

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="t1" placeholder="请输入添加的内容">
<input type="button" id="t2" value="添加">
<input type="button" id="t3" value="复制">
<input type="button" id="t4" value="删除">

<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
    //添加
    $('#t2').click(function () {
        var text = $('#t1').val();
        var temp = '<li>'+ text +'</li>';
        $('#ul1').append(temp);
    })
    //复制
    $('#t3').click(function () {
        var index1 = ($('#t1').val());
        var v = $('li').eq(parseInt(index1)-1).clone();
//        console.log($('li').length);
        $('#ul1').append(v);
        if (index1>$('li').length){
            alert('请输入的序号为1-'+ $('li').length);
        }
    })
    //删除
    $('#t4').click(function () {
         var index1 = ($('#t1').val());
          var v = $('li').eq(parseInt(index1)-1).remove();
          if ($('li').length == 0){
              alert('列表已经删除完毕！')
          }
          if (index1>$('li').length){
              alert('请输入的序号为1-'+ $('li').length);
          }
    })




</script>
</body>
</html>

YoungfreeFJS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery内容操作-增删改

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;input typ
复制链接

扫一扫

专栏目录