How to add a new column to an already existing html table using javascript
Question
Suppose I have below HTML script. I want to add a new header (th) and a new column to this table in the calculate.js file. Any suggestions how I should do this? Thank you !!
<body>
<div class="container">
<div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<h1 class="display-4">Hemelektronik</h1>
<p class="lead">See prices in below table:</p>
</div>
<div id="content">
<table id="my-table" class="table table-hover">
<thead class="thead-dark">
<tr>
<th>Acrticle</th>
<th>Product</th>
<th>Brand</th>
<th>Price</th>
<th>Numbers of Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Telephone</td>
<td>Samsung</td>
<td>5421</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>22256289</td>
<td>Telephone</td>
<td>Nokia</td>
<td>6200</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="scripts/calculate.js"></script>
2 answers
solution1
1 2019-12-18 14:32:17
I got an example for your scenario refer that and try to modify your code.
Html code:
<button onclick="add_a_row()">add rows</button>
<button onclick="add_a_col()">add column</button>
<table border="2" id="tableTest">
<tr>
<th>th1</th>
<td>thd2</td>
</tr>
</table>
JavaScript code:
function add_a_row()
{
var table = document.getElementById("myTable");
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
td.innerText = "im a <td>";
th.innerText = "im a <th>";
tr.appendChild(th);
tr.appendChild(td);
table.appendChild(tr);
}
function add_a_col(){
var table = document.getElementById("tableTest");
var rows = table.rows;
console.log("rows", rows);
for (var i = 0; i < rows.length; ++i) {
var td = document.createElement("td");
td.innerText = i;
rows[i].appendChild(td);
}
}
solution2
0 ACCPTED 2019-12-18 14:32:51
You can use querySelector / querySelectorAll to target the tr elements in the table head and body, and then use insertAdjacentHTML to append the new data. afterbegin places the new html as the first cell in the row. You could also use beforeend to place it at the end.
const headings = document.querySelector('thead tr'); const rows = document.querySelectorAll('tbody tr'); const data = ['000', '001']; headings.insertAdjacentHTML('afterbegin', '<th>Test</th>'); rows.forEach((row, i) => row.insertAdjacentHTML('afterbegin', `<td>${data[i]}</td>`));
<div class="container"> <div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto"> <h1 class="display-4">Hemelektronik</h1> <p class="lead">Se våra utmärkta priser på hemelektronik i tabellen nedan</p> </div> <div id="content"> <table id="pricetable" class="table table-hover"> <thead class="thead-dark"> <tr> <th>Artikelnr</th> <th>Produkttyp</th> <th>Varumärke</th> <th>Pris</th> <th>Antal</th> </tr> </thead> <tbody> <tr> <td>23456789</td> <td>Telefon</td> <td>Apple</td> <td>6500</td> <td> <input type="text" size="3" value="1" /> </td> </tr> <tr> <td>22256289</td> <td>Telefon</td> <td>Samsung</td> <td>6200</td> <td> <input type="text" size="3" value="1" /> </td> </tr> </tbody> </table> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.