<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="test_Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head runat="server">
<title>无标题页</title>
<script src="../Scripts/jquery-1.4.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
function AddItem_LearningExperience(){
var divContainer = $("#divContainerLearningExperience");
var txtItemCount = $("#txtItemCountLearningExperience");
if(divContainer != null && txtItemCount != null){
var table = $("<table width='610' border='0' align='center' cellpadding='0' cellspacing='0'></table>");
var tr1 = $("<tr></tr>");
var td1_1 = $("<td class='login' style='width: 35%;'> 所在学校:</td>");
var td1_2 = $("<td colspan='2' class='login'></td>");
var td1_2_text = $("<input></input>");
td1_2_text.attr("type", "text");
td1_2_text.attr("id", "txtLearningExperienceSchool" + txtItemCount.val());
td1_2_text.attr("size", "30");
td1_2_a = $("<img src='../images/items_delete.gif' border='0' style='cursor:pointer;'/>");
td1_2_a.click(function(){
table.remove();
});
td1_2.append(td1_2_text);
td1_2.append(td1_2_a);
tr1.append(td1_1);
tr1.append(td1_2);
var tr2 = $("<tr></tr>");
var td2_1 = $("<td class='login'>时间:</td>");
var td2_2 = $("<td colspan='2' class='login'></td>");
var td2_2_beginTime = $("<input></input>");
td2_2_beginTime.attr("type", "text");
td2_2_beginTime.attr("id", "txtLearningExperienceBeginTime" + txtItemCount.val());
td2_2_beginTime.css("width", "80px");
var td2_2_endTime = $("<input></input>");
td2_2_endTime.attr("type", "text");
td2_2_endTime.attr("id", "txtLearningExperienceEndTime" + txtItemCount.val());
td2_2_endTime.css("width", "80px");
td2_2.append(td2_2_beginTime);
td2_2.append(" - ");
td2_2.append(td2_2_endTime);
tr2.append(td2_1);
tr2.append(td2_2);
var tr3 = $("<tr></tr>");
var td3_1 = $("<td class='login'>专业:</td>");
var td3_2 = $("<td colspan='2' class='login'></td>");
var td3_2_text = $("<input></input>");
td3_2_text.attr("type", "text");
td3_2_text.attr("id", "txtLearningExperienceSpeciality" + txtItemCount.val());
td3_2_text.attr("size", "30");
td3_2.append(td3_2_text);
tr3.append(td3_1);
tr3.append(td3_2);
table.append(tr1);
table.append(tr2);
table.append(tr3);
divContainer.append(table);
txtItemCount.val(parseInt(txtItemCount.val()) + 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContainerLearningExperience">
</div>
<input id="txtItemCountLearningExperience" name="txtItemCountLearningExperience"
type="hidden" value="0" />
<a href="javascript:void(0);" οnclick="AddItem_LearningExperience();">add</a>
</form>
</body>
</html>
实现效果如下图:
========================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<title>无标题页</title>
</head>
<body>
<div>
<input id="Button1" type="button" value="添加" οnclick="javascript:AddItem()" /></div>
<div id="divContent">
<%--<div id="div1"><input id="Text1" type="text" /><a id="a1" οnclick="Remove(this)" href="javascript:void(0)">remove</a></div>--%>
</div>
<script type="text/javascript" language="javascript">
var itemNumber = 0;
function AddItem() {
var divContent = document.getElementById("divContent");
var divItem = document.createElement("div");
divItem.id = "div" + itemNumber;
var textItem = document.createElement("input");
textItem.type = "text";
textItem.id = "txt" + itemNumber;
textItem.value = itemNumber;
var aItem = document.createElement("a");
aItem.href = "javascript:void(0)";
aItem.id = "a" + itemNumber;
aItem.innerHTML = "remove";
if (window.attachEvent) {
//支持 IE
aItem.attachEvent("onclick", function() { Remove(aItem) });
}
else {
//支持 FF
aItem.addEventListener("click", function() { Remove(aItem) }, false);
}
divItem.appendChild(textItem);
divItem.appendChild(aItem);
divContent.appendChild(divItem);
itemNumber++;
}
function Remove(obj) {
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
</script>
</body>
</html>
实现效果如下图:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<html xmlns=" http://www.w3.org/1999/xhtml
<head runat="server">
<title>无标题页</title>
<script src="../Scripts/jquery-1.4.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
function AddItem_LearningExperience(){
var divContainer = $("#divContainerLearningExperience");
var txtItemCount = $("#txtItemCountLearningExperience");
if(divContainer != null && txtItemCount != null){
var table = $("<table width='610' border='0' align='center' cellpadding='0' cellspacing='0'></table>");
var tr1 = $("<tr></tr>");
var td1_1 = $("<td class='login' style='width: 35%;'> 所在学校:</td>");
var td1_2 = $("<td colspan='2' class='login'></td>");
var td1_2_text = $("<input></input>");
td1_2_text.attr("type", "text");
td1_2_text.attr("id", "txtLearningExperienceSchool" + txtItemCount.val());
td1_2_text.attr("size", "30");
td1_2_a = $("<img src='../images/items_delete.gif' border='0' style='cursor:pointer;'/>");
td1_2_a.click(function(){
table.remove();
});
td1_2.append(td1_2_text);
td1_2.append(td1_2_a);
tr1.append(td1_1);
tr1.append(td1_2);
var tr2 = $("<tr></tr>");
var td2_1 = $("<td class='login'>时间:</td>");
var td2_2 = $("<td colspan='2' class='login'></td>");
var td2_2_beginTime = $("<input></input>");
td2_2_beginTime.attr("type", "text");
td2_2_beginTime.attr("id", "txtLearningExperienceBeginTime" + txtItemCount.val());
td2_2_beginTime.css("width", "80px");
var td2_2_endTime = $("<input></input>");
td2_2_endTime.attr("type", "text");
td2_2_endTime.attr("id", "txtLearningExperienceEndTime" + txtItemCount.val());
td2_2_endTime.css("width", "80px");
td2_2.append(td2_2_beginTime);
td2_2.append(" - ");
td2_2.append(td2_2_endTime);
tr2.append(td2_1);
tr2.append(td2_2);
var tr3 = $("<tr></tr>");
var td3_1 = $("<td class='login'>专业:</td>");
var td3_2 = $("<td colspan='2' class='login'></td>");
var td3_2_text = $("<input></input>");
td3_2_text.attr("type", "text");
td3_2_text.attr("id", "txtLearningExperienceSpeciality" + txtItemCount.val());
td3_2_text.attr("size", "30");
td3_2.append(td3_2_text);
tr3.append(td3_1);
tr3.append(td3_2);
table.append(tr1);
table.append(tr2);
table.append(tr3);
divContainer.append(table);
txtItemCount.val(parseInt(txtItemCount.val()) + 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContainerLearningExperience">
</div>
<input id="txtItemCountLearningExperience" name="txtItemCountLearningExperience"
type="hidden" value="0" />
<a href="javascript:void(0);" οnclick="AddItem_LearningExperience();">add</a>
</form>
</body>
</html>
实现效果如下图:
![JQuery和JS动态创建表单 - 郁郁 - 郁郁的博客 JQuery和JS动态创建表单 - 郁郁 - 郁郁的博客](http://img.bimg.126.net/photo/ynEfodLbrl6otnzEuk5VaQ==/5791910595775246211.jpg)
========================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<html xmlns=" http://www.w3.org/1999/xhtml
<head>
<title>无标题页</title>
</head>
<body>
<div>
<input id="Button1" type="button" value="添加" οnclick="javascript:AddItem()" /></div>
<div id="divContent">
<%--<div id="div1"><input id="Text1" type="text" /><a id="a1" οnclick="Remove(this)" href="javascript:void(0)">remove</a></div>--%>
</div>
<script type="text/javascript" language="javascript">
var itemNumber = 0;
function AddItem() {
var divContent = document.getElementById("divContent");
var divItem = document.createElement("div");
divItem.id = "div" + itemNumber;
var textItem = document.createElement("input");
textItem.type = "text";
textItem.id = "txt" + itemNumber;
textItem.value = itemNumber;
var aItem = document.createElement("a");
aItem.href = "javascript:void(0)";
aItem.id = "a" + itemNumber;
aItem.innerHTML = "remove";
if (window.attachEvent) {
//支持 IE
aItem.attachEvent("onclick", function() { Remove(aItem) });
}
else {
//支持 FF
aItem.addEventListener("click", function() { Remove(aItem) }, false);
}
divItem.appendChild(textItem);
divItem.appendChild(aItem);
divContent.appendChild(divItem);
itemNumber++;
}
function Remove(obj) {
obj.parentNode.parentNode.removeChild(obj.parentNode);
}
</script>
</body>
</html>
实现效果如下图:
![JQuery和JS动态创建表单 - 郁郁 - 郁郁的博客 JQuery和JS动态创建表单 - 郁郁 - 郁郁的博客](http://img.bimg.126.net/photo/yLzsfpHNQmuvc7E2KvBs5w==/5791910595775246212.jpg)