從jquery生成表格

我是jquery和HTML的新手。我正在嘗試使用Jquery來創建表單。我想製作一個按鈕，它會在html頁面中添加輸入字段。（最多10個）。這是我試過的東西。從jquery生成表格

HTML文件

<!doctype html> 
<html> 
    <head> 
    <title>TakeMeHome</title> 
    <link rel="stylesheet" type="text/css" href="css/design.css"/> 
    <script type="text/javascript" src="/js/app.js"></script> 
    </head> 
    <body> 
    <center><form id="details"> 
     Your Place:<input id="source" type="text"><br><br> 
     Friend1:<input id="friend1" type="text"><br><br> 
     <div class="friends"></div> 
     <div id="button">Add!</div><br><br> 

     <input type="submit" id="submit" value="submit"> 
    </form> 
    </body> 
</html>

JS文件

var j=2; 

$(document).ready(function(){ 
    $('#button').click(function(){ 
     $('#friends').append("friend"+j+"<input type='text' id='friend"+j+"' "); 
    }); 

});

css文件

#button 
{ 
display: inline-block; 
height: 20px; 
width: 40px; 
background-color: red; 
font-family: arial; 
border-radius: 5px; 
text-align: center; 
color:white; 
}

來源

2013-01-09 user1263375

以及究竟是你的問題一回？ ;） –

的代碼將是這個樣子的：

var j=2; 
$('#button').click(function(){ 
    $('#friends').append("<input type='text' id='friend"+ j +"'/>"); 
});

如果你需要更難的東西。更多地描述情況。基於對timofeiMih您的評論和他的代碼

$('#button').click(function(){ 
    var j= $("#friends input").length; 
    $('#friends').append("<input type='text' id='friend"+ j +"'/>"); 
});

來源

2013-01-09 20:51:55 timofeiMih

繼承人的事情。我想從用戶那裏獲得輸入。如果用戶想要添加更多輸入，他可以。讓我們說他想說出他的朋友的名字。所以除了追加外，我還需要用戶作爲可變參數。所以我需要用戶添加的每個輸入字段的不同名稱。你知道我想說什麼嗎？ – user1263375

是的。你在使用PHP嗎？ – timofeiMih

。我修改了一些東西，如果我是你，我會怎麼做。首先我將您的<div id="button">Add!</div>修改爲<a href="#"> 然後我刪除了所有<br>標籤。爲什麼在使用css時需要它們？另外不要忘記捕捉所有包含內部標籤的輸入，當然是<label>;

對於所有的「朋友」的輸入，你可以寫自己的名字作爲數組：name="friend[]"所以，當你在PHP讓他們你將有一個像

Array (
    [friend] => 
    Array (
     [0] => a 
     [1] => b 
     [2] => c 
     [3] => d 
    ) 
)

來源

2013-01-09 20:58:52 b1nary

$(document).ready(function(){ 
    $('#button').click(function(){ 
     if($("#friends input[type=text]").length <= 10){ 
      var i = $("#friends input[type=text]").length 
      $('#friends').append("<label for='friend "+i+"'><input type='text' id='friend"+ i +"'/></label>"); 
     }else{ 
      alert("Max Friends Reached") 
      return; 
     } 
    }); 
});

來源

2013-01-09 21:00:05 str11

Here是你的代碼

來源

2013-01-10 09:14:24 stefanz

從jquery生成表格

回答

相關問題