如何使用JavaScript计算动态生成的HTML表中单元格中文本框的数量？
[英]How to count number of the textbox within a cell in a dynamically generated HTML Table using a JavaScript?
问题描述
I want to find how many fields are there of type 'text' within the cell no. 
我想查找单元格号中有多少个类型为“文本”的字段。 3 of every each and every row.I want to save this in an array and want to pass it to my aspx.cs page in Asp.NET C#. 每行3个。我想将其保存在数组中，并将其传递到Asp.NET C＃中的aspx.cs页面。 I am able to get the number of text box within a page but i want them to count as per the raw and cell number. 我能够获取页面内文本框的数量，但我希望它们根据原始和单元格数量进行计数。
I am generating this table dynamically. 我正在动态生成该表。 I want to get the number of text boxes within cell for each row 我想获取每一行单元格内的文本框数量
Scenario : I am having a scenario in which I want to generate a test report for a candidate. 场景：我正在想为候选人生成测试报告的场景。 user will enter report name and when he clicks on the plus button, it will generate a dynamic row (that contains two text boxes) for the subject information. 用户将输入报告名称，当他单击加号按钮时，它将为主题信息生成一个动态行（包含两个文本框）。 Within the dynamically generated raw one more button is there to generate the sub category of the subject. 在动态生成的原始另一个按钮中，可以生成主题的子类别。 All the subject and sub categories i wan to insert in a same table but, subject id will be the parent id of the sub-subjects. 我希望将所有主题和子类别插入同一表格中，但是主题ID将是子主题的父ID。 I want them to retrieve in a parent-child form. 我希望它们以父子形式检索。 please have a look on the screen shot attached. 请查看附带的屏幕快照。
<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" /> <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>
1 个解决方案
解决方案1
0 2019-02-15 10:43:19
您可以将特定类添加到所需元素，请使用javascript QuerySelector document.querySelectorAll('.specific-class').length;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.