如何从 HTML 生成表格？答案

【问题标题】：How to generate table from HTML?如何从 HTML 生成表格？
【发布时间】：2020-04-24 20:32:10
【问题描述】：

所以，我必须从 HTML 代码生成多个表格。我可以使用纯 javascript 代码生成多个表，但分配 id 并获取其值太难了。正如我写的 javascript 函数 generate_table
所以我从那个 HTML Table 创建了一个示例 HTML 表，如何再次生成相同的表（多次）。我为表 TD 和 TR 编写了太多的 javascript 代码。如何减少该代码。 我有很多表要重新生成特定表，所以我不能使用<table> 标签。有什么提示吗？代码示例？

function generate_table() {
  // get the reference for the body
  var body = document.getElementsByTagName('body')[0];

  // creates a <table> element and a <tbody> element
  var tbl = document.createElement('table');
  var tblBody = document.createElement('tbody');

  // creating all cells
  for (var i = 0; i < 1; i++) {
    var seqnumber = 1;
    var seq = +1;
    // creates a table row
    
    var row2 = document.createElement('tr');

    

    //====== table first row data =======//
    var seq = document.createElement('td');
    var seqText = document.createTextNode('Seq');
    var l = document.createElement('td');
    var seqText1 = document.createElement('input');

   

    //===== seq generator =====//
    seq.appendChild(seqText);
    row2.appendChild(seq);
    l.appendChild(seqText1);
    row2.appendChild(l);

   

    // add the row to the end of the table body
    tblBody.appendChild(row2);
  
  }

  // put the <tbody> in the <table>
  tbl.appendChild(tblBody);
  // appends <table> into <body>
  body.appendChild(tbl);
  // sets the border attribute of tbl to 2;
  tbl.setAttribute('border', '2');
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<h3> TABLE FROM JAVA SCRIPT</h3>
<input type="button" value="Generate a table." onclick="generate_table()" />

<h3> TABLE FROM HTML</h3>

<table id="table6">
  <tr>
    <th colspan="2">Aggregator</th>
  </tr>
  <tr>
    <th> Column Name </th>
    <th> Function </th>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
</table>
      
<input type="button" value="Generate same table from HTML." />

JSfiddle 链接：->https://jsfiddle.net/shreekantbatale2/evqsuxm8/5/

【问题讨论】：

长码没什么问题。 Howeber，如果你愿意用性能换取代码大小，你应该去Code Golf SE。
@D.Pardal 感谢先生，但我想从 HTML 重新生成同一张表！ HTML javascript 代码组合就好了！
你应该用 jQuery 试试。只需 $(`
') 并附加到某个地方就更容易了
@Edig 如果我有多个表，我只需要重新生成一些表怎么办
@ShreeBatale 您可以在 json 文件或类似文件中创建模板并加载它，然后根据需要创建。例如 $('.table).append(template.header)。如果您需要复制没有模板的现有文件。您需要根据某个类或您可以检测到的东西来检测要重新生成的内容

标签： javascript html jquery dom

【解决方案1】：

我的理解是你想添加一个模板表。这是使用 jQuery 的一种简单方法

var id = 0;

function generate_table() {
  var table = `<table id='table${id}'>
    <tr>
      <th colspan="2">Aggregator</th>
    </tr>
    <tr>
      <th> Column Name </th>
      <th> Function </th>
    </tr>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
  </table>`
  $('#table-template').append(table)
  id++
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> TABLE FROM JAVA SCRIPT</h3>
<input type="button" value="Generate a table." onclick="generate_table()" />

<h3> TABLE FROM HTML</h3>

<div id='table-template'></div>

      
<input type="button" value="Generate same table from HTML." />

我认为这就是您要寻找的东西。

function generate_table() {
  var table = $('#table6').clone()
  table.find('input').val('')
  $('#table-template').append(table)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> TABLE FROM JAVA SCRIPT</h3>
<input type="button" value="Generate a table." onclick="generate_table()" />

<h3> TABLE FROM HTML</h3>

<table id='table6'>
    <tr>
      <th colspan="2">Aggregator</th>
    </tr>
    <tr>
      <th> Column Name </th>
      <th> Function </th>
    </tr>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
  </table>
      
<input type="button" value="Generate same table from HTML." />


<div id='table-template'></div>

【讨论】：

嘿，我想从我的 HTML 表中重新生成表，而不是那个 seq one 的表，是否可以从我分配的表 id 中重新生成表 ''
哦，好的。我得到了它。只需要使用代码更改 var 表。我会编辑它
@ShreeBatale 您可以根据需要编辑模板代码。但是，如果您想从您拥有的 html 中获取它。那将是复制/粘贴值。页面加载时更好，自动添加1个表格
所以如果我点击生成表，每个表都会得到它的 ID，比如 1 2 3 4... 对吧？
@ShreeBatale。是的，我添加了另一个 sn-p，它将从您的真实 HTML 表中克隆和清除所有输入。但请记住在克隆时更改 id。与attr("id","newId");

【解决方案2】：

您可以在每次需要新的<table> 时使用<template> 元素生成新的HTML

const button = document.querySelector('.js-create-table');
const template = document.createElement('template');
template.innerHTML = `
  <table>
    <tr>
      <th colspan="2">Aggregator</th>
    </tr>
    <tr>
      <th> Column Name </th>
      <th> Function </th>
    </tr>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
  </table>
`;

function generateTable() {
  const table = template.content.cloneNode(true);
  document.body.append(table);
}

button.addEventListener('click', generateTable);

&lt;button class="js-create-table"&gt;Create table&lt;/button&gt;

如果您只想克隆原始表并从中创建一个副本。

const button = document.querySelector('.js-clone-table');
const table = document.querySelector('.js-table');

function cloneTable() {
  const clone = table.cloneNode(true);
  document.body.append(clone);
}

button.addEventListener('click', cloneTable);

<button class="js-clone-table">Clone table</button>

<table class="js-table">
  <tr>
    <th colspan="2">Aggregator</th>
  </tr>
  <tr>
    <th> Column Name </th>
    <th> Function </th>
  </tr>
  <tr>
    <td> <input> </td>
    <td> <input> </td>
  </tr>
</table>

【讨论】：

如果我想从它的表ID生成表怎么办？例如

我添加了一个示例，您可以在其中克隆 HTML 中的表格并将其粘贴到文档中。但请务必删除任何 id 属性，因为它们也会被克隆。请改用class 属性。

【解决方案3】：

复制一个包含所有内容的表格（或任何 html 元素）

const btTableCopy = document.getElementById('bt-table-copy')
  ,   originTable = document.getElementById('table6')
  ,   baseRowTbl  = originTable.querySelector('tbody tr')
  ;
var tableNum = 0
  ;
btTableCopy.onclick=()=>
  {
  let newTable = originTable.cloneNode(true)
    , newTbody = newTable.querySelector('tbody')
    ;
  newTable.id = `table-copy-${++tableNum}`  // there cannot be two identical id values on an HTML page

  for(let i=0;i<5;i++) // add 5 new rows
    {
    newTbody.appendChild(baseRowTbl.cloneNode(true))
    }
  newTable.querySelectorAll('input').forEach(inp=>inp.value='') // clear all table inputs
  document.body.appendChild(newTable)
  }

table {
  border-collapse: collapse;
  margin: 1em;
  }
thead {
  background-color: lightblue;
  }
td, th {
  border: solid grey 1px;
  padding: 1em;
  text-align : center;
  }

<table id="table6">
  <thead>
    <tr>
      <th colspan="2">Aggregator</th>
    </tr>
    <tr>
      <th> Column Name </th>
      <th> Function </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input> </td>
      <td> <input> </td>
    </tr>
  </tbody>
</table>

<button id="bt-table-copy">copy table with 5 new rows</button>

【讨论】：

如果我在表中添加了一些行，但我只想用新表生成第一（第一）行怎么办？