Develop Reference

Populate Bootstrap 4 Table From Array?

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>

jQuery Replace not acting as expected

$(".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>

How to delete the last column in an HTML TABLE using by jquery?

I have an HTML TABLE:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?

Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle

You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle

Toggle the <TR>

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

Sort Table Rows according to table data

For example, I have a code:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I want this to be sorted like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
</table>
I used this code:
function sortNum(a, b) {
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
$(function() {
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
$('table#information').append($(elems));
});
}
this works but, the problem is, the output is like this:
<table>
<tr>
<th>name</td>
<th>price</td>
</tr>
<tr>
<td>c</td>
<td class="sort"></td>
</tr>
<tr>
<td>b</td>
<td class="sort"></td>
</tr>
<tr>
<td>h</td>
<td class="sort">2</td>
</tr>
<tr>
<td>b</td>
<td class="sort">3</td>
</tr>
<tr>
<td>a</td>
<td class="sort">5</td>
</tr>
<tr>
<td>p</td>
<td class="sort">6</td>
</tr>
<tr>
<td>c</td>
<td class="sort">8</td>
</tr>
<tr>
<td>b</td>
<td class="sort">20</td>
</tr>
</table>
The empty one goes to top. I want the empty ones in the bottom.
Thanks

Instead of
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;
insert
return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
http://jsfiddle.net/E56j8/

You have number of plugins to sort it why are you reinventing the wheel.
Here is one such plugin
Link
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
$("#myTable").tablesorter();

Have a look at Sorting - we're doing it wrong. A simple jQuery plugin for sorting stuff is available here.
some notes on your code:
// you're binding a document ready event within a function call?
// looks the wrong way 'round, to me
function sortTheTable(){
$(function() {
// 1) you probably want to use .detach() over .remove()
// 2) "tr:has(.price)" will match ALL table rows
// containing an element with the class .price
// even if they're children of different <table>s!
// 3) $('.selector') is already "an array", at least it's sortable right away.
// there's no need for $.makeArray() here
var elems = $.makeArray($('tr:has(.price)').remove())
elems.sort(sortNum)
// "#information" is a sufficient (and more efficient) selector,
$('table#information').append($(elems));
});
}