CODEWITHSUNDEEP
javascripthtmljquerydom
Shree Batale
Shree Batale

Reputation: 237

How to generate table from HTML?

So, I have to generate multiple tables from the HTML code. I can be generating multiple tables using pure javascript code but its too difficult to assign ids and getting its value. as I wrote javascript function generate_table
so I have created one sample HTML table from that HTML TAble how to generate the same Table again(multiple times). I have written too much javascript code for tables TD and TR. How to reduce that code. I have many tables I want to regenerate the specific table so I cant use <table> tag. Any hint ? code sample ? 

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 Link : - >https://jsfiddle.net/shreekantbatale2/evqsuxm8/5/

Upvotes: 0

Views: 487

Answers (3)

Mister Jojo
Mister Jojo

Reputation: 22265

to duplicater a table with everyting inside (or any html element)

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>

Upvotes: 1

Eduardo Iglesias
Eduardo Iglesias

Reputation: 1066

What I understand is that you want to add a template table. Here is a simple way to do it with 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." />

I think this is what you are lookign for. 

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>

Upvotes: 1

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20934

You could use a <template> element to generate new HTML each time you want a new <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>

And if you just want to clone the original table and create a duplicate from it one.

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>

Upvotes: 1

Related Questions