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 >
<div >
<div >
<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>CodePudding user response：
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>CodePudding user response：
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 >
<div >
<div >
<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>CodePudding user response：
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 >
<div >
<div >
<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>CodePudding user response：
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> <!--