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>

Welcome to SO. What solutions have you tried?

Paul Dawson
– Paul Dawson

2019-12-18 14:28:01 +00:00
Commented Dec 18, 2019 at 14:28 — Paul Dawson
– Paul Dawson, Commented Dec 18, 2019 at 14:28

Gimnath · Accepted Answer · 2019-12-18 14:32:17Z

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);    
            }   


    }

Andy · Accepted Answer · 2019-12-18 14:38:08Z

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>

Collectives™ on Stack Overflow

How to add a new column to an already existing html table using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related