在追加时清除所有输入文本框值

时间:2016-04-07 11:52:57

标签: javascript

我想要的是当我点击添加更多时,附加所有文本框的空白值添加更多功能正常工作但在添加输入框时附加值但我想清除文本框值。

 <table>
    <tbody>
    <tr class="topdivdata">
    <td> <input type="text" value="First Name"></td>
    <td> <input type="text" value="Last Name"></td>
    <td> <input type="text" value="Mobile Number"></td>
    </tr>
    <tr role="row" class="odd">
    <td>
    <span class="btn btn-xs cic" id="addnewunit">
    <i class="icon-plus"></i>+ Add More</span>
    </td>   
    </tr>
    </tbody>
    <tbody id="addmoreunit"></tbody>
    </table>

    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>

    <script>
    unitcount=1;
     $('#addnewunit').click(function()
                {
                 var topdiv = $('.topdivdata').html();  
                 var refresdiv=topdiv;
            $('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');    
    unitcount++;
        var value = $('.target').val();
                    $('.list').val(value);
                    $('.removes1').click(function()
                        {
                            $(this).parent().remove();
                        });
    });

    </script>

&#13;
&#13;
 i want to when i click on add more append all text box with blank value add more function properly working but at append time input box upend with value but i want to clear text box value 
 <table>
    <tbody>
    <tr class="topdivdata">
    <td> <input type="text" value="First Name"></td>
    <td> <input type="text" value="Last Name"></td>
    <td> <input type="text" value="Mobile Number"></td>
    </tr>
    <tr role="row" class="odd">
    <td>
    <span class="btn btn-xs cic" id="addnewunit">
    <i class="icon-plus"></i>+ Add More</span>
    </td>   
    </tr>
    </tbody>
    <tbody id="addmoreunit"></tbody>
    </table>
    
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    
    <script>
    unitcount=1;
     $('#addnewunit').click(function()
    			{
    			 var topdiv = $('.topdivdata').html();	
    			 var refresdiv=topdiv;
    		$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');	
    unitcount++;
    	var value = $('.target').val();
    				$('.list').val(value);
    				$('.removes1').click(function()
    					{
    						$(this).parent().remove();
    					});
    });
    		
    </script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

不理解你的问题,但你可以这样做,

<table>
 <tbody>
    <tr class="topdivdata">
        <td>
            <input type="text" value="First Name">
        </td>
        <td>
            <input type="text" value="Last Name">
        </td>
        <td>
            <input type="text" value="Mobile Number">
        </td>
    </tr>
    <tr role="row" class="odd">
        <td>
            <span class="btn btn-xs cic" id="addnewunit" style="cursor:Pointer;">
                <i class="icon-plus"></i>+ Add More
            </span>
        </td>
    </tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>

和脚本就像,

 var unitcount = 1;
$('#addnewunit').click(function () {

    //Here i cloned your topDiv, so that i can add new inputs.
    var CloneTopDiv = $('.topdivdata').clone(true);
    CloneTopDiv.find(':input').attr('value', '');
    CloneTopDiv.attr('class', 'txtInput')
    CloneTopDiv = CloneTopDiv.html();
    var refresdiv = CloneTopDiv;
    $('#addmoreunit').append('<tr>.' + refresdiv + '.<td class="removes1"><span class="btn btn-xs" style="cursor:Pointer;"><i class="icon-plus"></i>- Remove</span></td></tr>');
    unitcount++;
    var value = $('.target').val();
    $('.list').val(value);

    //Code for Remove added row
    $('.removes1').click(function () {
        $(this).parent().remove();
    });

    //Clearing Code
    $('.txtInput').val('')

});

请参阅https://jsfiddle.net/eua98tqa/3/

处的解决方案