Как сгенерировать таблицу из HTML? - PullRequest
Новая
       5

Как сгенерировать таблицу из HTML?

0 голосов
/ 24 апреля 2020

Итак, мне нужно сгенерировать несколько таблиц из кода HTML. Я могу генерировать несколько таблиц, используя чистый код javascript, но слишком сложно назначить идентификаторы и получить их значение. как я написал javascript function generate_table
, поэтому я создал одну таблицу HTML образца из этой HTML TAble, как сгенерировать ту же таблицу снова (несколько раз). Я написал слишком много javascript кода для таблиц TD и TR. Как уменьшить этот код. У меня есть много таблиц, которые я хочу восстановить, указав таблицу c, поэтому я не могу использовать тег <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 Link: -> https://jsfiddle.net/shreekantbatale2/evqsuxm8/5/

Ответы [ 3 ]

1 голос
/ 25 апреля 2020

Вы можете использовать элемент <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>
1 голос
/ 25 апреля 2020

для дублирования таблицы с каждым внутри (или любым элементом 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>
1 голос
/ 25 апреля 2020

Я понимаю, что вы хотите добавить таблицу шаблонов. Вот простой способ сделать это с 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...