堆栈内存溢出
  繁体   English   中英

动态添加和删除文本框

[英]Dynamically add and delete text boxes

 原文  2015-09-22 05:51:40  3   5    javascript/ jquery/ html

问题描述

我用来创建功能的代码如下 

 <!DOCTYPE html>
<html>
<head>
<title>Dynamically Add and Delete Textbox using jQuery</title>
<meta charset='utf-8'>
<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <table>
        <tr>
        <th> Name </th>
        <th> Description </th>
        <th> section </th>
        </tr>
        <tr>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="input_1" type="text" name="val[]" class='left txt'/></td>

        <td><img class="add right" src="images/add.png" /></td>
        </tr>
        </table>


    </div>
   </div>   
    <input type='submit' value='Submit' class='but'/>
 </form>    
</div>

<script>
$('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><table><tr><th>  Name </th><th> Description </th><th> Section </th></tr>   <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

    $('#button_pro').on('click','.remove',function(){
            var parent=$(this).parent().prev().attr("id");
            var parent_im=$(this).parent().attr("id");
            $("#"+parent_im).slideUp('medium',function(){
                $("#"+parent_im).remove();
                if($('.add').length<1){
                    $("#"+parent).append('<img src="images/add.png" class="add right"/>');
                }
            });
            });


});
</script>
</body>

</html>

这里的问题是加号图像功能在不能删除文本框的减号图像不起作用的情况下可以正常工作。

当我从文本框变量中删除标签并将其添加到文本框变量中的标签之前时，它可以正常工作。

我不确定为什么标签更改会影响删除功能的功能

5 个解决方案

解决方案1
 0  2015-09-22 06:07:35

我已经修改了您的代码并使之更简单。 您可以使用最接近的函数使事情变得容易。

这是小提琴： http : //jsfiddle.net/swaprks/4b5wdev2/

CSS： 

@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}

JS： 

$('document').ready(function(){
    var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><table><tr><th>  Name </th><th> Description </th><th> Section </th></tr>   <tr><td><input id="name_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="desc_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="section_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td class="addTD"><img class="add right" src="images/add.png" /></td></tr></table></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

    $('#button_pro').on('click','.remove',function(){

            var parent = $(this).closest(".space");
           var parentPrev = $(parent).prev().find(".addTD");

            $(parent).slideUp('medium',function(){
                $(parent).remove();
                if($('.add').length < 1){
                    $(parentPrev).append('<img src="images/add.png" class="add right"/>');
                }
            });
            });


});

HTML： 

<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <table>
        <tr>
        <th> Name </th>
        <th> Description </th>
        <th> section </th>
        </tr>
        <tr>
        <td><input id="name_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="desc_1" type="text" name="val[]" class='left txt'/></td>
        <td><input id="section_1" type="text" name="val[]" class='left txt'/></td>

        <td class="addTD"><img class="add right" src="images/add.png" /></td>
        </tr>
        </table>


    </div>
   </div>   
    <input type='submit' value='Submit' class='but'/>
 </form>    
</div>

解决方案2
 0  2015-09-22 06:08:34

请看一下演示，以添加和删除动态输入字段： 

 $(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents p').size() + 1; $('#addScnt').on('click', function() { $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); i++; return false; }); $('#remScnt').on('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); 
 * { font-family:Arial; } h2 { padding:0 0 5px 5px; } h2 a { color: #224f99; } a { color:#999; text-decoration: none; } a:hover { color:#802727; } p { padding:0 0 5px 0; } input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2><a href="#" id="addScnt">Add Another Input Box</a></h2> <div id="p_scents"> <p> <label for="p_scnts"> <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /> </label> </p> </div>

谢谢！

解决方案3
 0  2015-09-22 06:16:38

见下面的演示

http://jsfiddle.net/y7g9no9L/

只需在.remove点击功能中添加以下行 

$('#button_pro').on('click','.remove',function(){
            $(this).parent().closest(".space").remove();
            });

解决方案4
 0  2015-09-22 06:16:54

您可以将data-*属性用于标签，并确保不重复ID。 拥有的最好方法是像data- * attrs中那样具有ID，以便它们可以具有重复对象。 

 $('document').ready(function(){ $('#button_pro').on('click','.add',function(){ var id=$('#button_pro > div.space').data('id')*1+1; $(this).remove(); var txt_box='<div class="space" data-id="'+id+'" id="input_'+id+'" ><table><tr><th> Name </th><th> Description </th><th> Section </th></tr> <tr><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><input id="input_'+id+'" type="text" name="val[]" class="left txt"/></td><td><img class="remove" src="images/remove.png" /></td><td><img class="add right" src="images/add.png" /></td></tr></table></div>'; $("#button_pro").append(txt_box); }); $('#button_pro').on('click','.remove',function(){ var id = $(this).closest('div.space').prev(); $(this).closest('#button_pro > div.space').slideUp('medium',function(){ if($('div.space').length>1){ if(this == $('#button_pro > div.space:last')[0]) id.find('td').last().append('<img src="images/add.png" class="add right"/>'); $(this).remove(); } }); }); }); 
 @font-face{font-family: Lobster;src: url('Lobster.otf');} body{width:750px;margin:0px auto;} .space{margin-bottom: 4px;} .txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;} p{font-family: Lobster;font-size:35px; text-align:center;} .but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Dynamically Add and Delete Textbox using jQuery</p> <div id="advice" style="width: 400px; height: auto;"> <form> <div id="button_pro"> <div class='space' data-id='1'> <table> <tr> <th> Name </th> <th> Description </th> <th> section </th> </tr> <tr> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><input id="input_1" type="text" name="val[]" class='left txt'/></td> <td><img class="add right" src="images/add.png" /></td> </tr> </table> </div> </div> <input type='submit' value='Submit' class='but'/> </form> </div>

解决方案5
 0  2015-09-22 06:21:43

创建index.html并添加jQuery库，文本框和图像（添加）。

HTML： 

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Textbox addition and Deletion using jQuery</title>
<meta charset='utf-8'>
<script src='js/jquery-1.9.1.min.js'></script>
</head>
<body>
<p>Dynamically Add and Delete Textbox using jQuery</p>
<div id="advice" style="width: 400px; height: auto;margin:0px auto;">
  <form>
  <div id="button_pro">
    <div class='space' id='input_1'>
        <input id="input_1" type="text" name="val[]" class='left txt'/>
        <img src="images/add.png" />
    </div>
   </div>    
    <input type='submit' value='Kiss Me!' class='but'/>
 </form>    
</div>
</body>

现在在头部添加以下css样式以添加美感。 

<style>
@font-face{font-family: Lobster;src: url('Lobster.otf');}
body{width:750px;margin:0px auto;}
.space{margin-bottom: 4px;}
.txt{width:250px;border:1px solid #00BB64; height:30px;border-radius:3px;font-family: Lobster;font-size:20px;color:#00BB64;}
p{font-family: Lobster;font-size:35px; text-align:center;}
.but{width:250px;background:#00BB64;border:1px solid #00BB64;height:40px;border-radius:3px;color:white;margin-top:10px;}
</style>

现在我们来参加jQuery派对。 第一个任务是，当我们单击加号图像时，它将在文本框中动态添加文本框。 

var id=2,txt_box;
    $('#button_pro').on('click','.add',function(){
          $(this).remove();
          txt_box='<div class="space" id="input_'+id+'" ><input type="text" name="val[]" class="left txt"/><img src="images/remove.png" class="remove"/><img class="add right" src="images/add.png" /></div>';
          $("#button_pro").append(txt_box);
          id++;
    });

观看演示

演示1

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Javascript动态添加文本框的值 动态添加dijit日期文本框 填充一个文本框后如何动态添加文本框？ 动态地将一些文本和文本框添加到现有网页 动态预填充文本框 将验证添加到动态创建的文本框JavaScript PHP 如何动态添加文本框而不丢失先前文本框的值？ 动态创建输入文本框 禁用动态创建的文本框 动态为文本框分配名称
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM