admin管理员组

文章数量:1391818

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?

  • javascript
  • html
  • getelementsbytagname
Share Improve this question edited Dec 9, 2019 at 16:51 Matredok asked Dec 9, 2019 at 16:28 MatredokMatredok 1201 gold badge3 silver badges17 bronze badges 3
  • 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

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

本文标签： htmlInsert tables into div via JavaScriptStack Overflow

版权声明：本文标题：html - Insert tables into div via JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744709314a2621029.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。