動態新增文字框並獲取文字框的值
阿新 • • 發佈:2018-11-16
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function btnadd() {
//點選新增文字框(這裡面我用了兩個圖片作為新增刪除的控制元件)
$("thead").append("<tr><td>文字1:<input id=\"txtOne\" /></td ><td>文字2:<input id=\"txtTwo\" /></td><td>文字3:<input id=\"txtThree\" /></td><td> <a class=\"remove\"><img id=\"delete\" src=\"Images/cross.png\" /></a></td></tr>");
$(".remove").bind("click", function () {
for (var i = 0; i < textNum; i++) {
var text = $("table thead tr").children("td").find("input").eq(i).val();
arr.push(text);
}
var json = JSON.stringify(arr);
alert(json);
}
</script>
</head>
<body>
<a class="insert" onclick="btnadd()"><img id="add" src="Images/event.png" /></a>
<table>
<thead>
</thead>
</table>
<input type="button" value="獲取值" onclick="btnValue()" />
</body>
</html>
//刪除文字框
$(this).parents("tr").remove(); }); } function btnValue() { var arr = []; var textNum = $("table thead tr").children("td").find("input").length;//迴圈獲取文字框的值