如何使用 JavaScript 显示 html 表单答案

【问题标题】：how to display html form using JavaScript如何使用 JavaScript 显示 html 表单
【发布时间】：2014-05-18 03:46:12
【问题描述】：

我有一个表格可以输入员工的技能，表格下方有一个添加新技能的链接。单击该链接时，必须再次显示该表格。

我写过这样的代码

             <html>
             <head>
             <script type="text/javascript">
         function newStyle()
         {
         document.getElementById('add').innerHTML="<html><body><table>  
         <tr>
     <td>Skill</td><td><select name="skill">
             <option>Select</option>
             </select></td>
     <td>percentage of knowledge</td>
     <td><input type="number" name="percentage" min="1" max="100"/></td>
     <td>No of years experience</td>
     <td><input type="text" name="no_years_experience"></td>
     <td>Highest level </td><td><select name="highest_level">
             <option>Select</option>
             </select></td>
         </tr>
         </table>
     </body></html>";
             }
             </script>
             </head>
             <body>
             <table>    
         <tr>
     <td>Skill</td><td><select name="skill">
             <option>Select</option>
             </select></td>
     <td>percentage of knowledge</td>
     <td><input type="number" name="percentage" min="1" max="100"/></td>
     <td>No of years experience</td>
     <td><input type="text" name="no_years_experience"></td>
     <td>Highest level </td><td><select name="highest_level">
             <option>Select</option>
             </select></td>
         </tr>
        </table>
    <a onclick="newStyle()" >Add New Skill</a>
            <div id="add"></div>
            </body> 
            </html>

当我点击添加新技能时，这里的表单不显示。谁能帮我显示表单

【问题讨论】：

标签： javascript jquery html ajax forms

【解决方案1】：

您有以下问题

JS 字符串不能有换行符。尽管可以将所有换行符更改为空或使用 \ 转义换行符，但不建议这样做，在这里也没有必要，正如您将看到的那样
如果您的字符串包含双引号，您需要将其用单引号括起来或转义双引号 \" 但在您的情况下，我们可以简单地克隆您的表

我给了你的表格一个 ID，给锚点一个 href 和 ID

纯 JavaScript 版本 - 需要将源表包装在容器中

Live Demo

window.onload=function() {
  var srcTable = document.getElementById("srcDiv").innerHTML;
  document.getElementById("addBut").onclick=function() {
    document.getElementById("add").innerHTML += srcTable; // note append is += 
    return false; // stop the click
  }
}

jQuery 版本：

Live Demo

$(function() {
  var $skillTable = $("#skilltable").clone(); // make a copy
  $("#addBut").on("click",function(e) {
    e.preventDefault();
    $("#add").append($skillTable.clone());
  });
});

如果需要默认值，请在默认表中设置它们

<input type="number" name="percentage" min="1" max="100" value="50" />

或在代码中设置它们：

$(function() {
  var $skillTable = $("#skilltable").clone(); // make a copy
  $("#addBut").on("click",function(e) {
    e.preventDefault();
    var $newTable = $skillTable.clone();
    $newTable.find('[name="percentage"]').val(50);
    $("#add").append($newTable);
  });
});

【讨论】：

亲爱的朋友，我是堆栈溢出的新手..我不明白如何接受答案..你能告诉我吗？
我用你告诉我的 jquery 版本解决了我的问题..但是我有另一个问题，当我在表单中输入值并单击链接添加新技能时，我得到另一个显示先前值的表单我输入了..有什么办法可以避免显示以前的值？？
亲爱的朋友，让我再问你1个问题？？当我单击添加新技能时，如何设置表单字段的默认值？例如：当我单击添加新技能时，它想要显示带有文本框的表单包含默认值..我不想通过编辑 html 代码为表单字段设置默认值..我想通过应用 jquery 函数来设置值在技能表的克隆上..
例如什么值？
例如，知识百分比设置为50

【解决方案2】：

如果您使用 Jquery，请尝试将您的代码包装到 $(document).ready 以确保您的 html 已加载..

接下来，注意你的引用，我认为你必须先使用单引号，因为你在 HTML 标签中使用双引号，如下所示：

document.getElementById('add').innerHTML='<html><body><table> ... </table> </body></html>'

【讨论】：

感谢您的回答