Develop Reference

How can I split 3 columns into 2 evenly?

I have the following React JSX code for a table:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
And I want to add a footer with 2 columns filling up the entire width but I'm having trouble doing that. I tried colspan but its not working as expected. How can I do this?

You can do this with colspan, all you need to take into account is that colspan should be integers (1,2,3) and cannot have something like 1.5.
So the trick is to also use colspan in your first row and give them all a colspan of 2, such that the total is 6 which you can divide by two columns of 3.
<table border="1">
<tr>
<td colspan="2">col1</td>
<td colspan="2">col2</td>
<td colspan="2">col3</td>
</tr>
<tr>
<td colspan="3">footer1</td>
<td colspan="3" >footer2</td>
</tr>
</table>

Just colspan your footer cell on all the 3 cells. Then add a separate table within that footer table and make 2 columns. Don't forget to make that inner table as lean as possible (no border, no margin, .. as you need it)
<table border="1">
<tr>
<td>col1</td>
<td width="400">col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tr>
<td width="50%">footer left</td>
<td width="50%">footer right</td>
</tr>
</table>
</td>
</tr>
</table>

How to construct this kind of irregular tables with colspan and rowspan?

I need to construct a table which will have complex col and row. How can I construct this kind of table?
I've already tried to construct but it seems that the output is not what I wished for. I want to make a left header which span two rows and the rows will have header and input field.
This is my code that I've already tried. I failed whenever i try to put theader to all the fields.
<table>
<tr>
<td rowspan="2">Flock ID</td>
<td>Field 1</td>
<td>Field 2</td>
<td>Field 3</td>
<td>Field 4</td>
<td>Field 5</td>
</tr>
<tr>
<td>Field 6</td>
<td>Field 7</td>
<td>Field 8</td>
<td>Field 9</td>
<td>Field 10</td>
</tr>
</table>
The table should have a columnn that span two rows. For each row there will be several headers.
This the example pic of my expected table

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 do I get the total of table data with a particular class? (jQuery)

Say I have the following table:
<table class="table questions">
<tr>
<td class="someClass">Some data</td>
<td class="someOtherclass">Some data</td>
</tr>
<tr>
<td class="someOtherClass">Some data</td>
<td class="someOtherclass">Some data</td>
</tr>
<tr>
<td class="someOtherClass">Some data</td>
<td class="someClass">Some data</td>
</tr>
</table>
How would I get the total of table data where they had the class value of someClass? e.g. for this table the total would be two.

Just use .length to find out how many there are
$('.questions .someClass').length // will return 2 since there are 2 rows

Assuming that you want to count the number for elements within a table with .someClass
$('.someClass', '.questions').length
or
$('.questions').find('.someClass').length //faster