I'm currently trying to dynamically populate a bootstrap 4 table from an array. I am trying to populate 3 tables that are actually side by side, and then will eventually filter the data from the array to be stored in each corresponding table. So what I am aiming to have is 3 tables that can be populated with a different number of rows each, with data taken directly from an array.
However, whenever I try and populate or create the table dynamically through a function, I either remove the Bootstrap formatting, or end up with some very odd results!
Below is essentially the type of layout I want to achieve, but this is static and I'd love to have something that can acquire these varying rows, based on how much data they retrieve from an array.
<div class="row">
<div class="col-md-4">
<h2 class="sub-header">Test Tab 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Content 1</td>
<td class="col-md-2">Content 1</td>
<td class="col-md-3">Content 1</td>
</tr>
<tr>
<td class="col-md-1">Content 2</td>
<td class="col-md-2">Content 2</td>
<td class="col-md-3">Content 2</td>
</tr>
<tr>
<td class="col-md-1">Content 3</td>
<td class="col-md-2">Content 3</td>
<td class="col-md-3">Content 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<h2 class="sub-header">Test Tab 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Content 4</td>
<td class="col-md-2">Content 4</td>
<td class="col-md-3">Content 4</td>
</tr>
<tr>
<td class="col-md-1">Content 5</td>
<td class="col-md-2">Content 5</td>
<td class="col-md-3">Content 5</td>
</tr>
<tr>
<td class="col-md-1">Content 6</td>
<td class="col-md-2">Content 6</td>
<td class="col-md-3">Content 6</td>
</tr>
<tr>
<td class="col-md-1">Content 7</td>
<td class="col-md-2">Content 7</td>
<td class="col-md-3">Content 7</td>
</tr>
<tr>
<td class="col-md-1">Content 8</td>
<td class="col-md-2">Content 8</td>
<td class="col-md-3">Content 8</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<h2 class="sub-header">Test Tab 3</h2>
<div class="table-responsive">
<table class="table table-striped">
<tbody>
<tr>
<td class="col-md-1">Content 9</td>
<td class="col-md-2">Content 9</td>
<td class="col-md-3">Content 9</td>
</tr>
<tr>
<td class="col-md-1">Content 10</td>
<td class="col-md-2">Content 10</td>
<td class="col-md-3">Content 10</td>
</tr>
<tr>
<td class="col-md-1">Content 11</td>
<td class="col-md-2">Content 11</td>
<td class="col-md-3">Content 11</td>
</tr>
<tr>
<td class="col-md-1">Content 12</td>
<td class="col-md-2">Content 12</td>
<td class="col-md-3">Content 12</td>
</tr>
<tr>
<td class="col-md-1">Content 13</td>
<td class="col-md-2">Content 13</td>
<td class="col-md-3">Content 13</td>
</tr>
<tr>
<td class="col-md-1">Content 14</td>
<td class="col-md-2">Content 14</td>
<td class="col-md-3">Content 14</td>
</tr>
<tr>
<td class="col-md-1">Content 15</td>
<td class="col-md-2">Content 15</td>
<td class="col-md-3">Content 15</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
When experimenting with just a single one of these tables to try and get the general concept working, I've just been going around in circles and can't seem to figure out this hierarchy of table elements and how to associate the javascript created rows to the bootstrap classes for design.
Below is my attempt, but it doesn't seem to alter the base bootstrap html or make any changes at all (one of numerous attempts)(credit to Ovidiu for fixing the error):
var testList = ["TestContent1", "TestContent2", "TestContent3", "TestContent4"];
function drawTable1() {
// get the reference for the body
var table1 = document.getElementById('table1Div');
// get reference for <table> element
var tbl = document.getElementById("table1");
// creating rows
for (var r = 0; r < testList.length; r++) {
var row = document.createElement("tr");
// create cells in row
for (var c = 0; c < 3; c++) {
var cell = document.createElement("td");
var cellText = document.createElement('span');
cellText.innerText = testList[r];
cell.appendChild(cellText);
row.appendChild(cell);
}
tbl.appendChild(row); // add the row to the end of the table body
}
table1.appendChild(tbl); // appends <table> into <div>
}
drawTable1();
Edit: To clarify, my question differs from the duplicate as I would still like to retain my bootstrap formatting. Simply creating a dynamic table removes all of the bootstrap classes and formatting that keeps the tables responsive.
Edit 2: Thank you Ovidiu for the working fiddle! This more clearly illustrates my point that the Bootstrap formatting is no longer applied once the table has been populated dynamically!
To add classes from JavaScript use className property:
var div = document.createElement('div');
div.className = 'some-class other-class';
You may also want to avoid using classes like col-md-3 with tables. Bootstrap layoud is float based while tables have their own display types in HTML/CSS and changing them to floats won't work (especially that you are not using row on rows etc.). Either move to purely <div> based layout or use width=8%, width=17% and width=25% respectively. And of course fix the bug of the widths not summing up to 100% (col-md-1 + col-md-2 + col-md-3 = col-md-6 < col-md-12 (12 is 100% row width in Bootstrap)). Or if you really want free space, then either add it explicitly as an empty cell or just set the whole table width to be 50%.
Answer to comment:
If you are going to use table-stripped then you need table to be <table> and not <div>, obviously. However you MUST NOT use col-md-# classes with table cells. Use width="33%" (or other appropriate value) attribute instead. If you create the whole table content dynamically, you may add <colgroup> sections and define columns separately from the content. Also, you should append your rows inside <tbody> not <table>. Appending them to <table> works only due to browser being backward compatibile with HTML 3, but Bootstrap is not and its styling gets broken. Bootstrap expects all the cells to be either in <thead>, <tbody> or <tfoot>, not directly under <table>. Example code:
<table class="table table-striped">
<colgroup>
<col width="17%">
<col width="33%">
<col width="50%">
</colgroup>
<tbody id="table2">
<tr>
<td>Content 4</td>
<td>Content 4</td>
<td>Content 4</td>
</tr>
<!-- etc. --->
</tbody>
</table>
Related
If I have the following table, which I can't manually touch, but can apply javascript to...
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
...when the DOM loads fully, how can I remove every instance of <tr><td height="10"></td></tr> from the above table via jQuery or raw JavaScript? I don't need that row at all and its causing design issues for me. This is my first time trying to learn how to replace a full pattern of elements.
Hopefully, this is doable via JavaScript?
This should do the trick.
jQuery
$('td[height="10"]').parent().remove();
https://jsfiddle.net/uzv3fn2e/1/
Vanilla JS
Array.from(document.querySelectorAll('td[height="10"]')).forEach(td => td.parentNode.remove());
https://jsfiddle.net/t7y6aqc5/
You can use :has() selector to select tr that has td with specific attribute
$("tr:has(td[height='10'])").remove()
$("tr:has(td[height='10'])").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
without using jquery javascript has also remove()
document.querySelectorAll("td").forEach(el => el.getAttribute("height") === "10" && el.parentNode.remove())
<table data="customTable">
<tr>
<td>item 1</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td>item 2</td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table>
$(".rowIWanTtoReplace").replaceWith("<tr><td rowspan='11' class='n'>n</td><td rowspan='8'>n</td><td>t</td><td>n</td></tr><tr><td>u</td><td>n</td></tr><tr><td>v</td><td>n</td></tr><tr><td>w</td><td>n</td></tr><tr><td>x</td><td>n</td></tr><tr><td>y</td><td>n</td></tr><tr><td>z</td><td>n</td></tr>");
td {
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
I just wanted to check whether or not this should be the result of a replaceWith() in this situation:
If I have a table and on one row I apply replaceWith(), And What I replace it with is multiple table rows.
Shouldn't that just affect the HTML so when displayed multiple should show in that section?
i.e ------ TR 1 -----------
.replaceWith("<tr>x</tr><tr>y</tr>")
shouldn't the first row replace the other row. And the second row append after?
Or is there an alternative method?
Thanks.
Example code for situation:
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
JQuery example:
$(".rowIWanTtoReplace").replaceWith("<tr>
<td rowspan="11" class="n">n</td>
<td rowspan="8">n</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>")
Note: This is made from backbone collections and stuff. I have outputted to the screen the html that it using to update. And put the code together as if it was normal jquery.
You cannot have linefeeds in strings unless you use template literals - also you had nested double quotes which also does not work.
In the original code you replaced a header cell with a table row which also did not compute.
This might be what you want:
$(".rowIWanTtoReplace").replaceWith(`<tr>
<td rowspan="11" class="tvmStatus">TVM Status</td>
<td rowspan="8">Component Events</td>
<td>t</td>
<td>n</td>
</tr>
<tr><td>u</td><td>n</td></tr>
<tr><td>v</td><td>n</td></tr>
<tr><td>w</td><td>n</td></tr>
<tr><td>x</td><td>n</td></tr>
<tr><td>y</td><td>n</td></tr>
<tr><td>z</td><td>n</td></tr>`)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="station-device-table4">
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr class="rowIWanTtoReplace">
<td rowspan="11" class="s">foobar</td>
<td rowspan="7">foobar</td>
<td>n</td>
</tr>
</table>
I have the code below:
function highlight(cell){
cell.style.borderColor = "red";
}
function originalColor(cell){
cell.style.borderColor = "black";
}
td{
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 1</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 2</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 4</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 5</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 7</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 8</td>
<td onmousedown="highlight(this);" onblur="originalColor(this);">Cell 9</td>
</tr>
</table>
It will highlight the border to red when click, when click to the other cell, it suppose change back to black color, but it doesn't work, I try onmouseup, onmouseover, it doesn't work as what I want.
The technique I'hv tried is using tabindex, it works; but that can highlight one cell, if I try to select 2 cells at the same time, it doesn't work. Anyone can help?
var redNow = 1;
function highlight(cell) {
redNow == 1 ? redNow = 0 : redNow.style.borderColor = "black";
redNow = cell;
cell.style.borderColor = "red";
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="highlight(this);">Cell 1</td>
<td onmousedown="highlight(this);">Cell 2</td>
<td onmousedown="highlight(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 4</td>
<td onmousedown="highlight(this);">Cell 5</td>
<td onmousedown="highlight(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="highlight(this);">Cell 7</td>
<td onmousedown="highlight(this);">Cell 8</td>
<td onmousedown="highlight(this);">Cell 9</td>
</tr>
</table>
After your clarifying comment, if I understand correctly, you want to highlight a cell when you click it, and remove the highlighting if you choose to by clicking another element. If not, please clarify again. If that's indeed the case though, then the following code will work by traversing up the DOM to the parent table, then iterating through all the cells and taking appropriate action:
function toggleBorderColor(c) {
cells = c.parentElement.parentElement.getElementsByTagName('td');
for (var i in cells) {
var cell = cells.item(i);
cell.style.borderColor = (cell != c) ? "" : "red";
}
}
td {
cursor: pointer;
}
<table border="1">
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 1</td>
<td onmousedown="toggleBorderColor(this);">Cell 2</td>
<td onmousedown="toggleBorderColor(this);">Cell 3</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 4</td>
<td onmousedown="toggleBorderColor(this);">Cell 5</td>
<td onmousedown="toggleBorderColor(this);">Cell 6</td>
</tr>
<tr>
<td onmousedown="toggleBorderColor(this);">Cell 7</td>
<td onmousedown="toggleBorderColor(this);">Cell 8</td>
<td onmousedown="toggleBorderColor(this);">Cell 9</td>
</tr>
</table>
I have the code below:
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
x.next().remove();
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
I would like to delete the next cell of the current cell I have called. When the Cell 2 is colspan, the Cell 3 should be removed, but I use .next().remove() is not working. Anyone can help?
This is something you could do.
function colspan() {
var ele = document.getElementById("Cell2");
ele.setAttribute("colspan", 2);
if (ele.nextElementSibling) {
ele.nextElementSibling.remove();
}
}
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change" />
I think you are mixing jQuery and pure JS..
You should use nextSibling() & removeChild(element) on parent.
have a look here: Remove element by id
The last remove() function was on jquery function. so use jquery library link and call the id with jquery type.
function colspan(){
var x = document.getElementById("Cell2");
x.setAttribute("colspan", 2);
$('#Cell2').next().remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td id="Cell1">Cell 1</td>
<td id="Cell2">Cell 2</td>
<td id="Cell3">Cell 3</td>
</tr>
<tr>
<td id="Cell4">Cell 4</td>
<td id="Cell5">Cell 5</td>
<td id="Cell6">Cell 6</td>
</tr>
<tr>
<td id="Cell7">Cell 7</td>
<td id="Cell8">Cell 8</td>
<td id="Cell9">Cell 9</td>
</tr>
</table>
<input type="button" onclick="colspan();" value="Change"/>
I am trying to do hide the belonging rows. For example if you click on 'Sub Title 1' which will then hide Item 1, Item 2 and Item 3 rows only.
Example:
<table border="1">
<tbody>
<tr class="head">
<td> title </td>
</tr>
<tr class="sub-title">
<td>Sub Title 1</td>
</tr>
<tr> <td>Item 1</td> </tr>
<tr> <td>Item 2</td> </tr>
<tr> <td>Item 3</td> </tr>
<tr class="sub-title">
<td>Sub Title 2</td>
</tr>
<tr> <td>Item 4</td> </tr>
<tr> <td>Item 5</td> </tr>
<tr> <td>Item 6</td> </tr>
</tbody>
</table>
-
$('.sub-title').click( function() {
$(this).parent().nextUntil('.sub-title').toggle();
})
It doesn't seem to work...
nextUntil selects for siblings, not children. Remove the "parent" from your call.
Edited to respond to further question about excluding some rows based on class. Obviously you can also accommodate Kolink's response about preventing toggle's "display: block" overwriting the default "display: table-row", but as long as you test in all supported browsers, I don't see any problem with using toggle.
$('.sub-title').click( function() {
$(this).nextUntil('.sub-title').each(function() {
if (!$(this).hasClass('order'))
$(this).toggle();
});
});
You have to toggle manually:
$(".sub-title").on("click",function() {
$(this).nextUntil(".sub-title").each(function() {
this.style.display = this.style.display == "none" ? "" : "none";
});
});