Question

我的问题是我正在尝试生成一些HTML代码以适应这一个GIANT表单。这个webapp将有12个字母，每周的每一天有10个文本框。我希望得到一些帮助，为一周中的每一天生成HTML代码。而不是必须为每周的每一天硬编码每个字母。会喜欢一些帮助。

我想如果我使用window.onload = function()，我可能会以正确的方式前进，但我不确定如何在加载窗口时使用Javascript在HTML中生成一行。

TLDR;如何通过独特的ID和名称，将jsp或JS复制粘贴到一个网页中，每周一次12次。

<form>
   <div id="sectionpart">
        <%--Monday #1
        --%>
        <h2>Monday Mail Piece #1</h2>
        <div id ="formpart" >
            <table border="0" cellspacing="3" cellpadding="3">
                    <tr>
                        <td>A. FORM*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" name="FORM_M1" type="number" maxlength="1" id="FORM_M1" value="8" size="10" required/></td>
                    </tr>               
                    <tr>
                        <td>B. ADDRESSEE*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADDRESSEE_M1" id="ADDRESSEE_M1" value="8" size="10" maxlength="1" required/></td>
                    </tr>
                    <tr>
                        <td>other field: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherdB_M1" id="otherB_M1" value="banana" size="30" /></td>
                    </tr>
                    <tr>
                        <td>C. RETURN ENVELOPE*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RETURN_ENVELOPE_M1" id="RETURN_ENVELOPE_M1" value="3" size="10" maxlength="1" required/></td>
                    </tr>
                    <tr>
                        <td>D. SENDER TYPE*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="SENDER_TYPE_M1" id="SENDER_TYPE_M1" value="10" size="10" maxlength="2" required/></td>
                    </tr>
                    <tr>
                        <td>other field: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherD_M1" id="otherD_M1" value="" size="50" /></td>
                    </tr>
                    <tr>
                        <td>E. PURPOSE*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="PURPOSE_M1" id="PURPOSE_M1" value="10" size="10" maxlength="2" required/></td>
                    </tr>
                    <tr>
                        <td>other field: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherE_M1" id="otherE_M1" value="" size="50" /></td>
                    </tr>
                    <tr>
                        <td>F. ADVERTISING*: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADVERTISING_M1" id="ADVERTISING_M1" value="1" size="10" maxlength="1" required/></td>
                    </tr>
                    <tr>
                        <td>G. READING: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="READING_M1" id="READING_M1" value="1" size="10" maxlength="1" /></td>
                    </tr>
                    <tr>
                        <td>H. REACTION: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="REACTION_M1" ID="REACTION_M1" value="1" size="10" maxlength="1" /></td>
                    </tr>
                    <tr>
                        <td>I. RESPONSE: </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RESPONSE_M1" ID="RESPONSE_M1" value="1" size="10" maxlength="1" /></td>
                    </tr>
                    <tr>
                        <td>Class: 01020304 </td>
                        <td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="Classnums_M1" ID="Classnums_M1" value="01020304" size="10" maxlength="8" /></td>
                    </tr>
                    <tr>
                        <td>J. CLASS*: (OK to pick more than one)</td>
                        <td><ol type="1" >
                                <li><input type="checkbox" name="Presorted-PRSRT-FP" value="ON" />Presorted First-Class <b>or</b> PRSRT, <b>or</b> FP</li>
                                <li><input type="checkbox" name="FirstC-Postage" value="ON" />First-Class Postage</li>
                                <li><input type="checkbox" name="ForeverStamp" value="ON" />Forever Stamp</li>
                                <li><input type="checkbox" name="AUTO" value="ON" />AUTO</li>
                                <li><input type="checkbox" name="ABAFMBAV" value="ON" />AB, <b>or</b> AF, <b>or</b> MB, <b>or</b> AV</li>
                                <li><input type="checkbox" name="SinglePiece" value="ON" />Single Piece, <b>or</b> SNGLP, <b>or</b> SP</li>
                                <li><input type="checkbox" name="OutsideUS" value="ON" />Mail from outside the U.S.</li>
                                <li><input type="checkbox" name="FRANKED" value="ON" />Federal Government with Official Signature(FRANKED)</li>
                                <li><input type="checkbox" name="OtherFed" value="ON" />Other Federal Government Mail</li>
                                <li><input type="checkbox" name="OtherClassification" value="ON" />Other classification (Specify on Answer Booklet page 4)
                                    <input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherJ_M1" ID="otherJ_M1"value="" size="50" maxlength="50"/></li>
                            </ol>
                        </td>  
                    </tr>
            </table>
    </div>
    <div id="imagepart">
        <img src="img/MailAustin.JPG" width="100%" height="675px" alt="MailAustin" ID="IMAGE_M1"/>
    </div>
    </div>

     repeat
     repeat
     ......
     repeat

</form>

Answer 1

您可以使用纯JS来获取一组html标记，克隆它们，然后将它们附加到DOM。您可以在onload函数中执行类似的操作：

imdb <- read_html("http://www.imdb.com/search/title?genres=horror&genres=mystery&sort=moviemeter,asc&view=advanced")
title <- html_nodes(imdb, '.lister-item-header a')
title <- html_text(title)
metascore <- html_nodes(imdb, '.ratings-metascore')
metascore <- html_text(metascore)
df <- data.frame(Title = title, Metascore = metascore)
Error in data.frame(Title = title, Metascore = metascore) : 
  arguments imply differing number of rows: 50, 29

克隆节点...... https://www.w3schools.com/jsref/met_node_clonenode.asp

此外，如果你可以自由使用框架，那么Polymer JS提供了一些很好的工具来重复html，而无需编写额外的JS。

使用jsp或Javascript生成HTML代码

1 个答案: