DOM object method is used to dynamically create a form, first as a serial number, the second as text boxes, in the third column for the delete button
CodePudding user response:
Please try from the following HTML example, it USES the method of DOM 1 by JavaScript to dynamically create an HTML form, it creates a consisting of four have text content cell of small tables, the cell's written content is: "the cell is the first line of the first column" x y, said in the number of rows and columns in a table cell,
Example code - use JavaScript and the DOM to create an HTML table & lt;/title> <br/><script> <br/>The function start () {<br/>//get the body tag <br/>Var mybody=document. GetElementsByTagName (" body ") [0]; <br/><br/>//create a & lt; Table> Elements and a & lt; Tbody> The element <br/>Mytable=document. The createElement method (" table "); <br/>Mytablebody=document. The createElement method (" tbody "); <br/><br/>//create all cell <br/>For (var j=0; J & lt; 2; J++) {<br/>//create a & lt; tr> The element <br/>Mycurrent_row=document. The createElement method (" tr "); <br/>for(var i=0; i <2; I++) {<br/>//create a & lt; td> The element <br/>Mycurrent_cell=document. The createElement method (" td "); <br/>//create a text node <br/>Currenttext=document. CreateTextNode (" cell is the first "+ j +", the first "+ I +" column "); <br/>//creates a text node is added to the & lt; td> The <br/>Mycurrent_cell. The appendChild (currenttext); <br/>//the column & lt; td> Added to the line & lt; tr> <br/>Mycurrent_row. The appendChild (mycurrent_cell); <br/>} <br/>//will line & lt; tr> Added to the & lt; Tbody> <br/>Mytablebody. The appendChild (mycurrent_row); <br/>} <br/>//will & lt; Tbody> Added to the & lt; Table> <br/>Mytable. The appendChild (mytablebody); <br/>//will & lt; Table> Added to the & lt; body> <br/>Mybody. The appendChild (mytable); <br/>//will table mytable border attribute is set to 2 <br/>Mytable. SetAttribute (" border ", "2"); <br/>} <br/></script> <br/></head> <br/><The body "start ()" & gt; <br/></body> <br/></html> <br/>Note that we create the elements and text nodes order: <br/><br/>1. Create & lt; The table & gt; The element <br/>2. Create & lt; The table & gt; The child elements & lt; Tbody & gt; <br/>3. Use a loop to create & lt; Tbody & gt; The child elements & lt; Tr & gt; <br/>4. Using a loop separately for each & lt; Tr & gt; Create child elements & lt; TB & gt; <br/>5. For each & lt; TB & gt; Create a text node <br/><br/>Create the & lt; The table & gt; , & lt; Tbody & gt; , & lt; Tr & gt; , & lt; Td & gt; Elements and text nodes, we use the reverse order to add them to their parent, <br/>1. Will create a text node is added to the & lt; Td & gt; The <br/><br/>Mycurrent_cell. The appendChild (currenttext); <br/>2. The column & lt; Td & gt; Added to the line & lt; Tr & gt; <br/><br/>Mycurrent_row. The appendChild (mycurrent_cell); <br/>3. The row & lt; Tr & gt; Added to the & lt; Tbody & gt; <br/><br/>Mytablebody. The appendChild (mycurrent_row); <br/>4. Will & lt; Tbody & gt; Added to the & lt; The table & gt; <br/><br/>Mytable. The appendChild (mytablebody); <br/>5. Will & lt; The table & gt; Added to the & lt; Body & gt; <br/><br/>Mybody. The appendChild (mytable); <br/>Remember this method, it is often used when you use the W3C DOM, first of all, you from the top down to establish elements; Then add them to the parent node from the bottom up, <br/>This is JavaScript code generated HTML: <br/><br/>. <br/><The table border=5 & gt; <br/><tr> <td> Cell is the row 0, 0 & lt;/td> <td> Cell is the row 0, column 1 & lt;/td> </tr> <br/><tr> <td> Cell is the line 1, 0 & lt;/td> <td> Cell is the line 1, column 1 & lt;/td> </tr> <br/></table> <br/>. <br/>This is the code generated table element and its child elements of the DOM object tree: <br/><br/>You only need to use a small amount of DOM methods to construct such a form and his child elements, remember to always keep in mind that you will create the structure of the model tree; This will make the code more simple, in figure & lt; The table & gt; Trees, & lt; The table & gt; Have one child & lt; Tbody & gt; , & lt; Tbody & gt; There are two child elements, & lt; Tbody & gt; Each child element (& lt; Tr & gt;) There are two child elements & lt; Td & gt; And in the end, each & lt; Td & gt; Have one child: a text node, <br/>The basic methods of DOM </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/Backend/2332.html" target="_blank" style="color:#999">https//www.codepudding.com/Backend/2332.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/Backend/2331.html'>For help! Unit material management system appear this problem</a></div>
<div class="detail-arr-right">Next:<a href='/Backend/2333.html'>c</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=The+base+class' target='_blank'>The base class</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html>