手把手教你用Jq手撸一个表单里动态增减Input的功能，

腿毛1米5的欧巴

于 2020-07-08 17:19:54 发布

阅读量498

点赞数 1

分类专栏：前端文章标签：动态增删表单种的输入框 jq删减input jquery html

本文链接：https://blog.csdn.net/qq_35164962/article/details/107210335

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

输入框后面有两个按钮+和-，点击+按钮增加一个输入框，点击-按钮删除一个input。

先上效果图：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
  <ul class="box">
  </ul>
</body>
<script>



// 动态渲染
function createHtml(liNumbers) {
  var liHtml = '';
  for(var i=0; i<liNumbers; i++) {
    liHtml += '<li> <input class="input'+ i +'" /> <button class="add-btn'+ i +'">+</button> <button class="minus-btn'+ i +'">-</button> </li>';
  }
  $(".box").append(liHtml);
};
createHtml(2);


// 获取点击btn的class
$('.box').on('click', 'button', function(e){
  var className = $(this).attr('class'); //点击当前btn的class
  var index = $('.box').find('input').length; // 下一个class的index
  if(className.indexOf('add') != -1) { // 点击的是+
    var htmlTemplate = '<li> <input class="input'+ index +'" /> <button class="add-btn'+ index +'">+</button> <button class="minus-btn'+ index +'">-</button> </li>';
    $(this).parent().after(htmlTemplate);
  }
  if(className.indexOf('minus') != -1) { // 点击的是-
    $(this).parent().remove();
  }
})
</script>
</html>

javacript代码种给每一行元素对应的classname都不一样，以便于后续获取input值的时候不会混淆。

先简单写到这里吧，帮助到你了请点个赞呗，万分感谢。

腿毛1米5的欧巴

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
手把手教你用Jq手撸一个表单里动态增减Input的功能，

输入框后面有两个按钮+和-，点击+按钮增加一个输入框，点击-按钮删除一个input。先上效果图：动态增减输入框代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq.
复制链接

扫一扫