在JavaScript中的特定列中添加行-有解無憂

我有一個 HTML 表格，有 616 行。但是，我想添加一個額外的列，并且該列的每一行都包含相同的元素。JS有辦法做到這一點嗎？我想在該列的每一行上添加的是這個符號這只是每個元素中的添加按鈕。這是我的代碼：

<div class="scrollingTable">
  <div class="row justify-content-center">
    <div class="col-md-8 col-lg-8 mb-8">
      <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
      <table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
        <thead>
          <tr>
            <th title="Field #1">drinkName</th>
            <th title="Field #2">drinkSizeInFlOz</th>
            <th title="Field #3">calories</th>
            <th title="Field #4">caffeineInMg</th>
            <th title="Field #5">caffeineInMgPerFloz</th>
            <th title="Field #6">type</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>28 Black Energy Drink</td>
            <td>8.46</td>
            <td align="right">125</td>
            <td align="right">80</td>
            <td align="right">9.5</td>
            <td>ED</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>3 Water </td>
            <td>16.9</td>
            <td align="right">0</td>
            <td align="right">50</td>
            <td align="right">3.0</td>
            <td>W</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>3D Energy Drink</td>
            <td>16</td>
            <td align="right">15</td>
            <td align="right">200</td>
            <td align="right">12.5</td>
            <td>ED</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>4 Purpose Energy Drink</td>
            <td>8.46</td>
            <td align="right">70</td>
            <td align="right">70</td>
            <td align="right">8.3</td>
            <td>ED</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>4C Energy Drink Mix</td>
            <td>16.9</td>
            <td align="right">15</td>
            <td align="right">170</td>
            <td align="right">10.1</td>
            <td>ED</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>5 Hour Energy</td>
            <td>1.93</td>
            <td align="right">4</td>
            <td align="right">200</td>
            <td align="right">103.6</td>
            <td>ES</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>
            <td>5 Hour Energy Extra Strength</td>
            <td>1.93</td>
            <td align="right">0</td>
            <td align="right">230</td>
            <td align="right">119.2</td>
            <td>ES</td>
            <td><button type="submit" id="myButton"> </button></td>
          </tr>
          <tr>

uj5u.com熱心網友回復：

有很多方法可以在表的每一行中插入一列。這完全取決于您使用的庫。我將假設您使用的是 vanilla Javascript（即：沒有外部庫）。

這是插入列的一種方法，并控制每個單元格的內容，包括檢測您當前是在表格標題上還是在正常單元格上。

const btn = document.getElementById('my-button');
btn.addEventListener('click', function(){
  const tr = document.querySelectorAll('#my-table tr');
  tr.forEach((row,index) => {
    let cell;
    if(index===0) {
      cell = document.createElement('th');
      cell.innerText = "fourth column";
    } else {
      cell = document.createElement('td');
      cell.innerText = `row ${index},4`;
    }
    
    row.appendChild(cell);
  });
  
});

table, td, th
{
border: 1px solid grey;
border-collapse: collapse;
}

td, th
{
padding: 1em;
}

button
{
margin-top: 2em;
}

<button id="my-button">Insert missing column</button>

<table id="my-table">
  <thead>
    <tr>
      <th>first column</th>
      <th>second column</th>
      <th>third column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, 1</td>
      <td>row 1, 2</td>
      <td>row 1, 3</td>
    </tr>
    <tr>
      <td>row 2, 1</td>
      <td>row 2, 2</td>
      <td>row 2, 3</td>
    </tr>
    <tr>
      <td>row 3, 1</td>
      <td>row 3, 2</td>
      <td>row 3, 3</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

const rows = document.getElementsByTagName("table")[0].rows; //Get all rows

for (let i = 1; i < rows.length; i  ) { // Iterate rows of body
  const row = rows[i]; // Get row
  const button = document.createElement("button"); // Create button
  button.innerHTML = " "; // Set text of button
  const cell = document.createElement("td"); // Create column
  cell.appendChild(button); // Add button to column
  row.appendChild(cell); // Add column to row
}

<div class="scrollingTable">
  <div class="row justify-content-center">
    <div class="col-md-8 col-lg-8 mb-8">
      <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
      <table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
        <thead>
          <tr>
            <th title="Field #1">drinkName</th>
            <th title="Field #2">drinkSizeInFlOz</th>
            <th title="Field #3">calories</th>
            <th title="Field #4">caffeineInMg</th>
            <th title="Field #5">caffeineInMgPerFloz</th>
            <th title="Field #6">type</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>28 Black Energy Drink</td>
            <td>8.46</td>
            <td align="right">125</td>
            <td align="right">80</td>
            <td align="right">9.5</td>
            <td>ED</td>
          </tr>
          <tr>
            <td>3 Water </td>
            <td>16.9</td>
            <td align="right">0</td>
            <td align="right">50</td>
            <td align="right">3.0</td>
            <td>W</td>
          </tr>
          <tr>
            <td>3D Energy Drink</td>
            <td>16</td>
            <td align="right">15</td>
            <td align="right">200</td>
            <td align="right">12.5</td>
            <td>ED</td>
          </tr>
          <tr>
            <td>4 Purpose Energy Drink</td>
            <td>8.46</td>
            <td align="right">70</td>
            <td align="right">70</td>
            <td align="right">8.3</td>
            <td>ED</td>
          </tr>
          <tr>
            <td>4C Energy Drink Mix</td>
            <td>16.9</td>
            <td align="right">15</td>
            <td align="right">170</td>
            <td align="right">10.1</td>
            <td>ED</td>
          </tr>
          <tr>
            <td>5 Hour Energy</td>
            <td>1.93</td>
            <td align="right">4</td>
            <td align="right">200</td>
            <td align="right">103.6</td>
            <td>ES</td>
          </tr>
          <tr>
            <td>5 Hour Energy Extra Strength</td>
            <td>1.93</td>
            <td align="right">0</td>
            <td align="right">230</td>
            <td align="right">119.2</td>
            <td>ES</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

我為您的問題創建了 jsfiddle。

var trs = document.querySelectorAll("#myTable tbody tr");
for (var tr of trs) {
  let td = document.createElement("td");
  let btn = document.createElement("button");
  btn.innerHTML = " ";
  btn.type = "submit";
  td.appendChild(btn);
  tr.appendChild(td);
}

<html>
<body>
<div class="scrollingTable">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-8 mb-8" >
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" >
                        <table id="myTable" cellspacing="0" cellpadding="1" border="1" width="300">
                            <thead>
                                <tr>
                                    <th title="Field #1">drinkName</th>
                                    <th title="Field #2">drinkSizeInFlOz</th>
                                    <th title="Field #3">calories</th>
                                    <th title="Field #4">caffeineInMg</th>
                                    <th title="Field #5">caffeineInMgPerFloz</th>
                                    <th title="Field #6">type</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>28 Black Energy Drink</td>
                                    <td>8.46</td>
                                    <td align="right">125</td>
                                    <td align="right">80</td>
                                    <td align="right">9.5</td>
                                    <td>ED</td>
                                </tr>
                                <tr>
                                    <td>3 Water </td>
                                    <td>16.9</td>
                                    <td align="right">0</td>
                                    <td align="right">50</td>
                                    <td align="right">3.0</td>
                                    <td>W</td>
                                </tr>
                                <tr>
                                    <td>3D Energy Drink</td>
                                    <td>16</td>
                                    <td align="right">15</td>
                                    <td align="right">200</td>
                                    <td align="right">12.5</td>
                                    <td>ED</td>
                                </tr>
                                <tr>
                                    <td>4 Purpose Energy Drink</td>
                                    <td>8.46</td>
                                    <td align="right">70</td>
                                    <td align="right">70</td>
                                    <td align="right">8.3</td>
                                    <td>ED</td>
                                </tr>
                                <tr>
                                    <td>4C Energy Drink Mix</td>
                                    <td>16.9</td>
                                    <td align="right">15</td>
                                    <td align="right">170</td>
                                    <td align="right">10.1</td>
                                    <td>ED</td>
                                </tr>
                                <tr>
                                    <td>5 Hour Energy</td>
                                    <td>1.93</td>
                                    <td align="right">4</td>
                                    <td align="right">200</td>
                                    <td align="right">103.6</td>
                                    <td>ES</td>
                                </tr>
                                <tr>
                                    <td>5 Hour Energy Extra Strength</td>
                                    <td>1.93</td>
                                    <td align="right">0</td>
                                    <td align="right">230</td>
                                    <td align="right">119.2</td>
                                    <td>ES</td>
                                </tr>
                                
                                </tbody>
                                </table>
                                </div>
                                </div>
                                </div>
                                
</body>
</html>

uj5u.com熱心網友回復：

使用document.QueryselectorAll獲取<tr>表的所有子元素，id 為 mytable。

現在您有了一個陣列，您可以使用 for 回圈來訪問每個<tr>元素并appendChild與包含您想要的任何內容的另一個元素。

不要忘記th>在第一個回圈中插入。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/494103.html

標籤：javascript html css

上一篇：如何通過特定屬性相交兩個不同的物件集合？

下一篇：如何在單個TypeScript檔案中宣告多個列舉并在單個匯出陳述句下回傳（以便不直接公開單個列舉）