使用 JavaScript 代码制作 HTML 表单和表格。答案

【问题标题】：Make HTML form and table by using JavaScript code.使用 JavaScript 代码制作 HTML 表单和表格。
【发布时间】：2016-02-01 08:35:02
【问题描述】：

我尝试在 HTML 页面中使用 JavaScript 代码制作表单和表格。但是代码的方式不正确。所以我需要用 JavaScript 方式制作表格和表格。表单和表格的 HTML 代码在以下代码中显示为 cooment。

<html>
<body>
    <script>
           function clickFunction(e) {
  document.getElementsByName('inputvalue')[0].innerHTML =
  document.getElementsByName('name')[0].value;
  e.preventDefault(); //fallback
  return false;
  }
    </script>
    <!-- <form>
        Name: <input type="text" name="name">
        <input type="button" value="Done" onclick="clickFunction(event)">
    </form> -->
    <script>
        var form = $('<form>');
        var input = $('<input>',{
        type: 'button',
        name: 'name' });
        var button = $('<input>',{
        type: 'button',
        value: 'Done',
        onclick: 'clickFunction(event)'
        });
        input.appendTo(form);
        button.appendTo(form);
        form.appendTo('<body>');
    </script>

    <!-- <table border="1">
        <tr><td>Data input: </td><td><label name="inputvalue" > </label></td></tr>
    </table> -->

    <script>
var table = $('<table>');
        var tr = $('<tr>');
        var td_1 = $('<td>',{
        text: 'Data input'
        });
        var td_2 = $('<td>');
        var label = $('<label>',{
        name: 'inputvalue' });
        label.appendTo(td_2);
        td_2.appendTo(tr);
        td_1.appendTo(tr);
        tr.appendTo(table);
        table.appendTo('<body>');
    </script>
</body>
</html>

【问题讨论】：

哦，你想使用jQuery而不包含它？
这里需要使用JQuery链接吗？
在我的答案中尝试完整的代码。
谢谢。我需要在这段代码中添加 JQuery。 :)
我已经添加了你的代码。现在可以了。谢谢。

标签： javascript jquery html

【解决方案1】：

添加 jQuery 类库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

在您的页面中使用.appendTo('body'); 而不是.appendTo('<body>');

function clickFunction(e) {
  document.getElementsByName('inputvalue')[0].innerHTML =
    document.getElementsByName('name')[0].value;
  e.preventDefault(); //fallback
  return false;
}

var form = $('<form>');
var input = $('<input>', {
  type: 'text',
  name: 'name'
});
var button = $('<input>', {
  type: 'button',
  value: 'Done',
  onclick: 'clickFunction(event)'
});
input.appendTo(form);
button.appendTo(form);
form.appendTo('body');

var table = $('<table>');
var tr = $('<tr>');
var td_1 = $('<td>', {
  text: 'Data input'
});
var td_2 = $('<td>');
var label = $('<label>', {
  name: 'inputvalue'
});
label.appendTo(td_2);
td_2.appendTo(tr);
td_1.appendTo(tr);
tr.appendTo(table);
table.appendTo('body');

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

完整代码

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>

    function clickFunction(e) {
      document.getElementsByName('inputvalue')[0].innerHTML =
        document.getElementsByName('name')[0].value;
      e.preventDefault(); //fallback
      return false;
    }

    var form = $('<form>');
    var input = $('<input>', {
      type: 'text',
      name: 'name'
    });
    var button = $('<input>', {
      type: 'button',
      value: 'Done',
      onclick: 'clickFunction(event)'
    });
    input.appendTo(form);
    button.appendTo(form);
    form.appendTo('body');

    var table = $('<table>');
    var tr = $('<tr>');
    var td_1 = $('<td>', {
      text: 'Data input'
    });
    var td_2 = $('<td>');
    var label = $('<label>', {
      name: 'inputvalue'
    });
    label.appendTo(td_2);
    td_2.appendTo(tr);
    td_1.appendTo(tr);
    tr.appendTo(table);
    table.appendTo('body');
</script>
</body>
</html>

【讨论】：

【解决方案2】：

尝试更改 appendTo 正文函数

//form.appendTo('<body>');
form.appendTo('body');

//table.appendTo('<body>');
table.appendTo('body');

【讨论】：

我试过了，按照你说的修改代码后还是不行。

【解决方案3】：

<script type="text/javascript">
        document.write("<html><body><form><table border='1'><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></form></body></html>");
</script>

无论您想在 javascript 中使用什么 html 内容，只需将其粘贴到 document.write();

【讨论】：

我需要分别包含每个 HTML。然后我可以根据需要添加它们。因此