如何使用 javascript 或 jquery 快速创建表

Question

我想通过点击一个按钮创建一个表，我需要将表保存到数据库中。这是创建表的代码，但我认为这很长，我怎样才能快速创建它？

var div = document.createElement("div");
        var table1 = document.createElement("table");
        var table2 =document.createElement("table");
        var thead = document.createElement("thead");
        var th1 = document.createElement("th");
        var th2 = document.createElement("th");
        var th3 = document.createElement("th");
        th1.innerHTML="Count";
        th2.innerHTML="Date";
        th3.innerHTML="Price";
        document.body.appendChild(div);
        div.appendChild(table1);
        div.appendChild(table2);
        table2.appendChild(thead);
        thead.appendChild(th1);
        thead.appendChild(th2);
        thead.appendChild(th3);

Answer 1

以下功能可能会有所帮助：

function html2dom (html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    return div.removeChild(div.firstChild);
}

这里是如何使用它：

document.body.appendChild(html2dom(''
+ '<div>'
+     '<table></table>'
+     '<table>'
+         '<thead>'
+             '<th>Count</th>'
+             '<th>Date</th>'
+             '<th>Price</th>'
+         '</thead>'
+     '</table>'
+ '</div>'
));

现场演示：

document.body.appendChild(html2dom(''
+ '<div>'
+   '<p>Paragraph.</p>'
+   '<ul>'
+     '<li>Item 1.</li>'
+     '<li>Item 2.</li>'
+     '<li>Item 3.</li>'
+   '</ul>'
+ '</div>'
));

function html2dom (html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  return div.removeChild(div.firstChild);
}

Answer 2

如果您想进行一些增强，可以使用诸如 muchtache.js 之类的预编译模板：

<table>
   <tr>
   <th> Count </th>
   <th> Date </th>
   <th> Price </th>
</tr>
{{#jsonObject}}
<tr>
   <td>{{Count1}}</td>
   <td>{{Date1}}</td>
   <td>{{Price1}}</td>
</tr>
{{/jsonObject}}
</table>

在 javascript 中，您可以将 javascript jsonobject 编写为：

jsonobject : [{
    count1 : 1,
    date1 : 12/12/2012,
    price1 : 100
},
{
    count1 : 2,
    date1 : 12/12/2013,
    price1 : 200
}
]

如需完整的更多示例，请访问Json Object into Mustache.js Table

Answer 3

如果代码太长，我建议在不显示的 div 中创建一个 html 表结构。然后当用户点击按钮时，你可以

1. 显示隐藏的表格。
2. 克隆表并将其附加到某些内容（如果您希望多次创建表）

您的代码将如下所示（克隆方式）：

jQuery:

$('#myButton').on('click', function(){
  $(document.body).append($('original').clone());
});

Javascript：

document.getElementById('myButton').onclick = function(){
    document.body.appendChild(document.getElementById('original').cloneNode());
}

这是您可以隐藏的 html 表格。

<div style="display: none;">
    <table id="original">
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </table>
</div>

这大大减少了您的 javascript 代码。