Question

假设我有以下HTML脚本。我想向calculate.js文件中的此表添加一个新的标头（th）和一个新列。有什么建议我应该怎么做？谢谢!!

<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>

Answer 1

我为您的情况提供了一个示例，请参考该示例并尝试修改您的代码。

HTML代码：

<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代码：

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


    }

Answer 2

您可以使用querySelector / querySelectorAll来定位表标题和正文中的tr元素，然后使用insertAdjacentHTML附加新数据。 afterbegin将新的html放置为该行的第一个单元格。您也可以使用beforeend将其放在最后。

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>

如何使用javascript向现有的html表添加新列

2 个答案: