在JavaScript中的特定列中添加行

发布于 2025-02-09 16:14:40 字数 4039 浏览 2 评论 0原文

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

原文

I have a table in HTML, which has 616 rows. However, I would like to add an extra column, and each of the rows for that column would contain the same element. Is there a way with JS to do that? What I would like to add on each row for that column is this symbol
Which is just an add button that goes in every element.
Here is my code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ま昔日黯然 2025-02-16 16:14:40

我为您的问题创建了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>

I created the jsfiddle for your problem.

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>

回复收藏 0 原文

樱花坊 2025-02-16 16:14:40

有很多方法可以将列插入表的每一行。
这完全取决于您使用的库。
我会假设您正在使用香草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>

There are a lot of ways to insert a column into each row of a table.
It all depends on what libraries you are using.
I will assume that you are using vanilla Javascript, (i.e: no external libraries).

Here is one way to insert a column, and control the content of each cell,
including detecting if you are currently on the table header, or normal cell.

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>

回复收藏 0 原文

亽野灬性zι浪 2025-02-16 16:14:40

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>

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>

回复收藏 0 原文

悲凉≈ 2025-02-16 16:14:40

重要的！

＃ID是独一无二的！

页面上的#id不超过相同的#id之一，因为它是：

无效的html
语义上的粗略
行为变得不可预测的
JavaScript，如果不是立即，但最终破坏了
恐怖分子的胜利

，就像OP中的一吨一样：

<button type="submit" id="myButton">+</button> <!--

IMPORTANT!

#IDs ARE UNIQUE!

Do not have more than one of the same #id on a page because it's:

invalid HTML
semantically gross
behavior becomes unpredictable
JavaScript if not immediately but eventually break
the terrorists win

There's like a ton of these in OP:

<button type="submit" id="myButton">+</button> <!--????-->

Try to avoid using #id at all -- use .class instead.
In the example below the function insertCol() is versatile and reusable. The <table> has a <tfoot> for demonstration purposes. Details are commented in the example.

// This object stores content for insertCol() to fill a table
let content = {
  cap: {
    text: 'TEXT',
    side: '',
    act: 0 // 1='use data' 0='skip data'
  },
  tH: {
    th: 'tH',
    act: 0
  },
  tB: {
    th: '',
    td: `<td><button class="btn btn-sm btn-info add">➕</button></td>`,
    act: 1
  },
  tF: {
    td: 'tF',
    act: 0
  }
};

/**
 * @desc - Inserts a column into a given table
 * @param {number} index - Index to inert new column at
 * @param {object} content - Object that stores content
 * @param {string<selector>} selector - CSS Selector of a 
 *        tag if undefined @default is "table"
 */
function insertCol(index, content, selector = 'table') {
  // Reference <table>
  const table = document.querySelector(selector);
  // Collect all <tr> into an array
  const rowArray = [...table.rows];
  let cols = rowArray[0].cells.length;
  let size = rowArray.length;
  //console.log(size);
  //console.log(cols);

  /*
  If content.tB is active (1)...
  ... .foreach() <tr> add <td> and content at the index
  */
  if (content.tB.act) {
    rowArray.forEach(tr => {
      tr.insertCell(index).innerHTML = content.tB.td;
    });
  }
  /*
  If there's a <thead> AND content.tH.act === 1...
  ... .removeCell() at index...
  ... add <th> with content
  */
  if (table.tHead && content.tH.act) {
    rowArray[0].deleteCell(index);
    rowArray[0].insertCell(index).outerHTML = `<th>${content.tH.th}</th>`;
  }
  // The same as above for <tfoot>
  if (table.tFoot && content.tF.act) {
    rowArray[size - 1].deleteCell(index);
    rowArray[size - 1].insertCell(index).innerHTML = content.tF.td;
  }
  // This block is for <caption>
  if (table.caption && content.cap.act) {
    table.caption.innerHTML = content.cap.text;
    table.caption.style.captionSide = content.cap.side;
  }
}

// -1 is the index after the last index
insertCol(-1, content);

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container scrollingTable">
    <section class="row justify-content-center">
      <div class="col-md-8 col-lg-8 mb-8">
        <label class='form-label' for='search'>Search</label>
        <input id="search" class='form-control mb-2' type="text" placeholder="Search for names..">
        <table class='table table-striped table-hover'>
          <caption></caption>
          <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>125</td>
              <td>80</td>
              <td>9.5</td>
              <td>ED</td>
            </tr>
            <tr>
              <td>3 Water </td>
              <td>16.9</td>
              <td>0</td>
              <td>50</td>
              <td>3.0</td>
              <td>W</td>
            </tr>
            <tr>
              <td>3D Energy Drink</td>
              <td>16</td>
              <td>15</td>
              <td>200</td>
              <td>12.5</td>
              <td>ED</td>
            </tr>
            <tr>
              <td>4 Purpose Energy Drink</td>
              <td>8.46</td>
              <td>70</td>
              <td>70</td>
              <td>8.3</td>
              <td>ED</td>
            </tr>
            <tr>
              <td>4C Energy Drink Mix</td>
              <td>16.9</td>
              <td>15</td>
              <td>170</td>
              <td>10.1</td>
              <td>ED</td>
            </tr>
            <tr>
              <td>5 Hour Energy</td>
              <td>1.93</td>
              <td>4</td>
              <td>200</td>
              <td>103.6</td>
              <td>ES</td>
            </tr>
            <tr>
              <td>5 Hour Energy Extra Strength</td>
              <td>1.93</td>
              <td>0</td>
              <td>230</td>
              <td>119.2</td>
              <td>ES</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>FOOT</td>
              <td>FOOT</td>
              <td>FOOT</td>
              <td>FOOT</td>
              <td>FOOT</td>
              <td>FOOT</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

回复收藏 0 原文

~没有更多了~