如何从 HTML 生成表？
[英]How to generate table from HTML?
问题描述
所以，我必须从 HTML 代码生成多个表。 我可以使用纯 javascript 代码生成多个表，但分配 id 并获取其值太难了。 正如我写的 javascript function generate_table
所以我从 HTML 表中创建了一个示例 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/
3 个解决方案
解决方案1
1 已采纳 2020-04-24 21:03:19
我的理解是你想添加一个模板表。 这是使用 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>
解决方案2
1 2020-04-24 21:04:03
你可以使用<template>元素来生成新的 HTML 每次你想要一个新的<table>
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);
<button class="js-create-table">Create table</button>
如果您只想克隆原始表并从中创建一个副本。
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>
解决方案3
1 2020-04-24 21:49:59
复制一个里面有everyting的表（或任何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>
如何使用jsPDF从HTML表格正确生成具有完整表格大小的PDF
[英]How to generate correctly PDF from HTML table with full size of the table using jsPDF
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.