JQuery創建按鈕點擊動態文本框

我是jQuery的新手。我想動態添加兩個標籤爲firstname和lastname的文本框，單擊「添加」按鈕。JQuery創建按鈕點擊動態文本框

<table border="0" cellspacing="2"> 
      <tr><td style= "width:200px;" align="right">Name 
      <td> 
      <input type="text" id="current Name" value="" /> 
      </td></td> 
      </tr>      
        <tr> 
         <td align="right">Test value</td> 
         <td> 
          <select id="test" style= "width:350px;">        
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td align="right">datas</td> 
         <td> 
       <input type="button" id="add" value="Add" onclick="AddTables();"/>      

         </td> 
        </tr> 

        <tr> 
         <td style="height:3px" colspan="2"></td> 
        </tr> 
        <tr style="background-color: #383838"> 
         <td></td> 
              </tr> 
        <tr> 

        </tr> 
        <tr> 

         </div> 
         </div> 
         </td> 
        </tr> 
       </table>

http://jsfiddle.net/x7uQx/

我有添加文本框的限制。最多7.同樣，還有一種方法可以刪除文本框嗎？

來源

2013-08-29 chinchu

如果要添加文本框，你可以請註明？ – Sharad

1）正確縮進你的HTML標記，2）澄清你的問題，3）添加你已經在JS中嘗試過的東西 - 並希望你會得到對你的問題的讚揚，對你的代碼有用的批評和一些很好的建議/例子。擁有近千的聲望，你應該已經知道房子的規則;） –

以下加入按鈕 – chinchu

DEMO

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length < 7) { 
     table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
    } 
}); 
$('#del').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length > 1) { 
     table.find('input:text').last().closest('tr').remove(); 
    } 
});

.closest()

.append()

OP的評論後更新

DEMO

$('#add').click(function() { 
    var table = $(this).closest('table'); 
    console.log(table.find('input:text').length); 
    if (table.find('input:text').length < 7) { 
     var x = $(this).closest('tr').nextAll('tr'); 
     $.each(x, function (i, val) { 
      val.remove(); 
     }); 
     table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>'); 
     $.each(x, function (i, val) { 
      table.append(val); 
     }); 
    } 
}); 
$('#del').click(function() { 
    var table = $(this).closest('table'); 
    if (table.find('input:text').length > 1) { 
     table.find('input:text').last().closest('tr').remove(); 
    } 
});

來源

2013-08-29 06:39:56

http://jsfiddle.net/x7uQx/15/同時點擊添加或刪除按鈕如何在添加和刪除按鈕下方生成文本框而不是jodetails標題 – chinchu

@chinchu檢查更新的演示 –

我希望下面的代碼是你

<html> 
<head> 
<title>jQuery add/remove textbox example</title> 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<style type="text/css"> 
div{ 
    padding:8px; 
} 
</style> 

</head> 

<body> 

<h1>jQuery add/remove textbox example</h1> 

<script type="text/javascript"> 

$(document).ready(function(){ 

var counter = 2; 

$("#addButton").click(function() { 

if(counter>10){ 
     alert("Only 10 textboxes allow"); 
     return false; 
} 

var newTextBoxDiv = $(document.createElement('div')) 
    .attr("id", 'TextBoxDiv' + counter); 

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + 
     '" id="textbox' + counter + '" value="" >'); 

newTextBoxDiv.appendTo("#TextBoxesGroup"); 


counter++; 
}); 

$("#removeButton").click(function() { 
if(counter==1){ 
     alert("No more textbox to remove"); 
     return false; 
    } 

counter--; 

    $("#TextBoxDiv" + counter).remove(); 

}); 

$("#getButtonValue").click(function() { 

var msg = ''; 
for(i=1; i<counter; i++){ 
    msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val(); 
} 
     alert(msg); 
}); 
    }); 
</script> 
</head><body> 

<div id='TextBoxesGroup'> 
<div id="TextBoxDiv1"> 
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' > 
</div> 
</div> 
<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Remove Button' id='removeButton'> 
<input type='button' value='Get TextBox Value' id='getButtonValue'> 

</body> 
</html>

Link

來源

2013-08-29 06:30:38 kondapaka

請添加一些代碼。對於未來的訪問者，一個無效的鏈接將會很有用:) –

如果你有答案，請在這裏描述答案。只有鏈接的答案是不鼓勵的。 – Krishnabhadra

更加有用如果您有表或文本框的ID或類，你要刪除，那麼你可以使用jQuery的.remove()功能。這裏是鏈接.remove()

<script> 
$("button").click(function() { 
$("#id1").remove(); //this will remove your textfield or table or row from table whose id is id1 
}); 
</script>

對於添加你可以使用.append()或.appendTo()取決於您的需要。

您的問題尚不清楚，但我想這就是你要找的。

來源

2013-08-29 06:31:49

您可以使用.append()這樣

$('input[type=button]').on('click', function() { 
$(this).append('<label for="firstname">first name</label> <input type="text" id="firstname"/>'); 
$(this).append('<label for="lastname">last name</label> <input type="text" id="lastname"/>'); 
});

使用.remove()刪除元素這樣

$('#firstname, label[for="firstname"]').remove(); 
$('#lastname, label[for="lastname"]').remove();

來源

2013-08-29 06:41:04 Praveen

jsfiddle.net/x7uQx/15 while點擊添加或刪除按鈕我如何生成下面的添加和刪除按鈕，而不是jodetails標題 – chinchu

我已經修改了你的HTML點點。

<table id="tbl" border="0" cellspacing="2"> 
      <tr><td style= "width:200px;" align="right">Name 
      <td> 
      <input type="text" id="current Name" value="" /> 
      </td></td> 
      </tr>      
        <tr> 
         <td align="right">Test value</td> 
         <td> 
          <select id="test" style= "width:350px;">        
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td align="right">datas</td> 
         <td> 
       <input type="button" id="add" value="Add"/>      

         </td> 
        </tr> 

        <tr> 
         <td style="height:3px" colspan="2"></td> 
        </tr> 
        <tr style="background-color: #383838"> 
         <td></td> 
              </tr> 
        <tr> 

        </tr> 
        <tr> 

         </div> 
         </div> 
         </td> 
        </tr> 
       </table>

這裏是jQuery代碼

$(document).ready(function(){ 
$("#add").bind("click",AddTables); 
function AddTables(e) 
    { 
     if($("#tbl tr[addedrow='yes']").length<7) 
     { 
     $("#tbl").append("<tr addedrow='yes'><td>First Name</td><td><input type='text'/></td></tr><tr><td>Last Name</td><td><input type='text'/></td></tr>"); 
     } 
    } 

});

你可以看到它http://jsfiddle.net/x7uQx/12/

您可以將這些也使用.remove()刪除。

來源

2013-08-29 06:42:48 Sharad

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#ddlSelect").change(function() 
      { 
       $("#divTxtGroup").empty();    
       var num = this.value; 
       if (num > 0) { 
        for (i = 1; i <= num; i++) { 
         var newTextBoxDiv1 = $(document.createElement('div')).attr("id", 'divTxt' + i); 
         newTextBoxDiv1.after().html('<label>Textbox ' + i + ' : </label><input type="text" id="txt' + i + '">'); 
         newTextBoxDiv1.appendTo("#divTxtGroup"); 
        } 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <select id="ddlSelect" name="ddlSelect"> 
     <option value="0">-----Select-----</option> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 
    <div id='divTxtGroup'></div> 
</body>

來源

2015-06-25 12:09:30

你還可以描述你的答案嗎？爲什麼它比別人更有用？ – ZygD

JQuery創建按鈕點擊動態文本框

回答

相關問題