JQuery和JS动态创建表单_js和jquery的append table-优快云博客

本文链接：https://blog.youkuaiyun.com/sven_xu/article/details/46323667

本文展示了一个使用JavaScript实现的动态网页，用户可以点击按钮添加新的学习经验项，包括所在学校、时间、专业等信息，并且可以删除多余的项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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);" onclick="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="添加" onclick="javascript:AddItem()" /></div>
    <div id="divContent">
        <%--<div id="div1"><input id="Text1" type="text" /><a id="a1" onclick="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>
实现效果如下图：