html - Insert tables into div via JavaScript

Hello I'm trying to insert multiple tables into a div.

I have a multiple tables in my document for e.g.

<table>
   <tr>
      <th>1</th>
      <th>2</th> 
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr>
</table>

Now I want to select them:

table = document.getElementsByTagName("TABLE");

create div with class "tablediv"

and add each table to "tablediv" like:

<div class="tablediv">
   <table>
      ...
   </table>
</div>

Is it possible with pure js?

Hello I'm trying to insert multiple tables into a div.

I have a multiple tables in my document for e.g.

<table>
   <tr>
      <th>1</th>
      <th>2</th> 
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr>
</table>

Now I want to select them:

table = document.getElementsByTagName("TABLE");

create div with class "tablediv"

and add each table to "tablediv" like:

<div class="tablediv">
   <table>
      ...
   </table>
</div>

Is it possible with pure js?

Share Improve this question edited Dec 9, 2019 at 16:51 asked Dec 9, 2019 at 16:28 Matredok 1201 gold badge3 silver badges17 bronze badges

2 It's unclear, exactly what are you trying to do, but I'm almost sure that it's possible with pure JS... – FZs Commented Dec 9, 2019 at 16:34
Please provide more information about what you are trying to do. It's not clear if you want to move or copy the tables elsewhere. Or you just want to select and modify them? – Yogi Commented Dec 9, 2019 at 16:44
Sorry, I've edited my question. Hope it's clear now ? – Matredok Commented Dec 9, 2019 at 16:51

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You could do something like this:

let divTable = document.createElement("div"); //create new <div>
divTable.id = "tablediv";

let tables = document.getElementsByTagName("table"); //HTMLCollection which is live, no need to delete "old tables"
while (tables.length > 0) divTable.append(tables[0]); //add every <table> to the new <div>

let body = document.querySelector("body"); //change to the preferred selector
body.append(divTable); //append new <div> to the selected Element, in this case <body>

It's possible doing something like that

var table = document.getElementsByTagName("TABLE");
var div = document.getElementById('tablediv');
div.innerHTML += table;

Not sure about document.getElementsByTagName("TABLE"); output you might need to use an extra attribute to access the html like innerHTML and you might need to use it in a loop if it's an array.

run this solution. It has 4 tables. With a button-click, all the tables will be added to the DIV.

function gatherTables(){
  var all_tables = document.getElementsByTagName('table');
  var tableCollectionDiv = document.getElementById('tablediv');
  
  tableCollectionDiv.innerHTML = '';
  Array.prototype.forEach.call(all_tables, a => {
    tableCollectionDiv.appendChild(a.cloneNode(true));
  });
}

table td, table th {
  border: 2px solid #ddd;
  padding: 6px;
}

#tablediv{
  background-color:  #8AC7DB;
  height: 500px;
}

body{
  background-color:#338BA8;
}

#tablediv > table{
  margin-top: 20px; 
  margin-bottom: 20px;
}

button{
  background-color: #75E6DA;
}

<table>
   <tr>
      <th>1a</th>
      <th>2a</th> 
   </tr>
   <tr>
      <td>1a</td>
      <td>2a</td>
   </tr>
</table>

<br>
<table>
   <tr>
      <th>1b</th>
      <th>2b</th> 
   </tr>
   <tr>
      <td>1b</td>
      <td>2b</td>
   </tr>
</table>
<br>
<table>
   <tr>
      <th>1c</th>
      <th>2c</th> 
   </tr>
   <tr>
      <td>1c</td>
      <td>2c</td>
   </tr>
</table>


<br>
<table>
   <tr>
      <th>1d</th>
      <th>2d</th> 
   </tr>
   <tr>
      <td>1d</td>
      <td>2d</td>
   </tr>
</table>

<br>
<button onclick="gatherTables()">Gather Tables Now</button>
<br>
<hr>
 DIV start
<div id="tablediv"></div>
 DIV end

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Insert tables into div via JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)