CODEWITHSUNDEEP
javascripthtml
guskansma
guskansma

Reputation: 51

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

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>

Upvotes: 1

Views: 2366

Answers (2)

Andy
Andy

Reputation: 63524

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>

Upvotes: 0

Gimnath
Gimnath

Reputation: 1070

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


    }

Upvotes: 1

Related Questions