javascript - 如何使用 JavaScript 计算动态生成的 HTML 表格中单元格内的文本框数量？

问题描述

我想在单元格编号中查找“文本”类型的字段数量。每一行中的 3 个。我想将它保存在一个数组中，并希望将它传递给我在 Asp.NET C# 中的 aspx.cs 页面。我能够获取页面内文本框的数量，但我希望它们按照原始和单元格数进行计数。

场景：我有一个场景，我想为候选人生成测试报告。用户将输入报告名称，当他单击加号按钮时，它将为主题信息生成一个动态行（包含两个文本框）。在动态生成的原始数据中，还有一个按钮可以生成主题的子类别。我想在同一个表中插入所有主题和子类别，但是主题 ID 将是子主题的父 ID。我希望他们以父子形式检索。请查看随附的屏幕截图。

<head id="Head1" runat="server">

    <title></title>

    <style type="text/css">

        .TemplateTable

        {

            width: 80%;

            margin-left: 3%;

            border: 2px solid #a7a8a7;

            margin-top: 30px;

            padding-left: 35px;

            font-size: 15px;

            font-style: initial;

            font-weight: bold;

            color: #a7a8a7;

            padding-top: 3px;

            padding-bottom: 3px;

        }

        .TemplateTable tr td div

        {

            float: left;

            padding-right: 10px;

            font-size: 16px;
            height: 22px;
        }

        .TemplateTable tr td div a

        {

            color: Blue;

        }

        .custom-tablePopup

        {

            font-family: Arial, Helvetica, sans-serif;

            font-size: 13px;

            margin: 10px 0 0 0;

            padding: 0;

            border-right: 1px solid #bebebe;

            border-top: 1px solid #bebebe;

            border-bottom: 1px solid #bebebe;

        }

        .custom-tablePopup th

        {

            background: #ff5c00 !important;

            text-align: left;

            border-left: 1px solid #bebebe;

            border-bottom: 1px solid #bebebe;

            padding: 5px 8px;

            color: #fff;

        }

        .custom-tablePopup td

        {

            border-left: 1px solid #bebebe;

            padding: 4px 8px;

        }

        .custom-tablePopup tr:nth-child(even)

        {

            background: #f8f8f8;

        }

    </style>

    <script type="text/javascript">

        var count = "1";

        function addRow(in_tbl_name) {

            var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];

            // create row

            var row = document.createElement("TR");

            // create table cell 2

            var td1 = document.createElement("TD")

            var strHtml2 = "<input type=\"text\" name=\"SName\" size=\"20\" maxlength=\"30\" />";

            td1.innerHTML = strHtml2.replace(/!count!/g, count);

            // create table cell 3

            var td2 = document.createElement("TD")

            var strHtml3 = "<input type=\"text\" name=\"SScore\" size=\"10\" />";

            td2.innerHTML = strHtml3.replace(/!count!/g, count);

            // create table cell 4

            var td3 = document.createElement("TD")

            var strHtml4 = "<img src=\"../Images/cancel.jpg\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";

            td3.innerHTML = strHtml4.replace(/!count!/g, count);

              // create table cell 4

            var td4 = document.createElement("TD")

            var strHtml5 = "<img src=\"../Images/Plus.jpg\" onclick=\"AddSubRow()\" style=\"width: 22px; cursor:pointer;\" />";

            td4.innerHTML = strHtml5.replace(/!count!/g, count);

            // append data to row

            row.appendChild(td1);

            row.appendChild(td2);

            row.appendChild(td3);

             row.appendChild(td4);

            count = parseInt(count) + 1;

            // add to count variable

            // append row to table

            tbody.appendChild(row);

        }

        function delRow() {

            var current = window.event.srcElement;

            //here we will delete the line

            while ((current = current.parentElement) && current.tagName != "TR");

            current.parentElement.removeChild(current);

        }

        function AddSubRow() {

            var current = window.event.srcElement;

            var row1 = document.createElement("TR");

            // create table cell 1

            var td1 = document.createElement("TD")

            var strHtml2 = "<input type=\"text\" name=\"SubjectName\" size=\"20\" />";

           td1.innerHTML = strHtml2.replace(/!count!/g, count);

            // create table cell 2

            var td2 = document.createElement("TD")

            var strHtml3 = "<input type=\"text\" name=\"SubjectScore\" size=\"10\" />";

            td2.innerHTML = strHtml3.replace(/!count!/g, count);

            // create table cell 2

            var td3 = document.createElement("TD")

            var strHtml4 = "<img src=\"../Images/cancel.jpg\" onclick=\"delRow()\" style=\"width: 22px; cursor:pointer;\" />";

            td3.innerHTML = strHtml4.replace(/!count!/g, count);

               row1.appendChild(td1);
               row1.appendChild(td2);
               row1.appendChild(td3);
            //here we will delete the line

            //while ((current = current.parentElement) && current.tagName != "TR");

            current.parentElement.appendChild(row1); 

        }

        function Calculate() {

           // var oTable = document.getElementById('tblPets');
           
            var marks = [];
            var table = document.getElementById("tblPets");
            var column_count = table.rows[1].cells.length;
            var rowLength = table.rows.length;
            alert(document.querySelectorAll('input[type="text"]').length);

    }
   

    </script>

</head>

<body>

    <form id="form1" runat="server" method="post">

    <div id="dvReport" runat="server">

        <table class="TemplateTable" runat="server" >

            <tr>

                <td>
                    Report Name  <asp:TextBox ID="txtreportName" runat="server" Width="500px"></asp:TextBox>
                </td>

                <td style="float: right;">

                    <div>

                        <img id="Img1" src="~/Images/Plus.jpg" width="20" runat="server" /></div>

                    <div>

                        <a title="Add Subject" style="cursor: pointer;font-family:Arial;color:navy" onclick="addRow('tblPets')">Add Subject</a>

                    </div>

                </td>

            </tr>

        </table>

    </div>

    <div style="margin-left: 3%;" id="dvSubject" runat="server">

        <table id="tblPets" class="custom-tablePopup" runat="server">

            <tr>

                <th>Subject Name</th>

                <th>Subject Score</th>

                <th></th>
                <th></th>

            </tr>

            <tr>

                <td><input type="text" name="SName" size="20" /></td>

                <td><input type="text" name="SScore" size="10" /></td>

                <td><img src="../Images/Delete.png" onclick="delRow()" style="width: 22px; cursor: pointer;" /></td>

                <td><img src="../Images/Plus.jpg" onclick="AddSubRow()" style="width: 22px; cursor: pointer;" /></td>

            </tr>

        </table>

    </div>

    <div>
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="Calculate()"  OnClick="btnSave_Click" />
        &nbsp;&nbsp;
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
    </div>

    <div>
        <asp:Label ID="lblDisplay" runat="server"></asp:Label>
        <asp:Literal ID="lit" runat="server"></asp:Literal>

    </div>
    </form>

</body>

标签： javascriptc#.net

javascript - 如何使用 JavaScript 计算动态生成的 HTML 表格中单元格内的文本框数量？

问题描述

解决方案

推荐阅读