We Keep Coding

Split one big table into multiple tables based on content of acolumn in each row

I looked at previous similar questions and only found one answer with the following code splitting the data into 2 tables:
// ==UserScript==
// #name TABLE SPLITTER
// #namespace http://www.w3schools.com/
// #description DESCRIPTION!!!
// #include http://www.w3schools.com/css/css_table.asp
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// #require https://raw.github.com/tomgrohl/jQuery-plugins/master/jcookie/script/jquery.jcookie.min.js
// #version 1
// ==/UserScript==
$(function(){
// YOUR JAVASCRIPT CODE HERE
// YOU HAVE JQUERY INCLUDED
setTimeout(function(){
var mainTable = $("table");
var splitBy = 3;
var rows = mainTable.find ( "tr" ).slice( splitBy );
var secondTable = $("<table id='secondTable' style='background:pink;'><tbody></tbody></table>").insertAfter("table");
secondTable.find("tbody").append(rows);
console.log(secondTable);
mainTable.find ( "tr" ).slice( splitBy ).remove();
}, 3000);
});
I am looking for something like this that will split the information to tables base on the amount of different options i have.
ultimately i would like something like:
Goal
Or even better remove the type from the output and have it show before each of the new tables like this: option 2
Not sure if that even possible and would love some help.

This is not the optimal solution, you can get the idea and improve it.
Read JS comments.
var dynamicData = $('#dynamicData'); // To identify the parent that we will append data to.
$(document).ready(function(){
$('.types').each(function(){ // loop on each type and check if that type not appended inside '#dynamicData' as 'h5', if no,t append it and append a table related to it
var name = $.trim($(this).text());
var check = $('h5#i_' + name , dynamicData).length;
if (check === 0){
$(dynamicData).append('<h5 id="i_' + name + '">' + name + '</h5>');
$(dynamicData).append('<table id="t_' + name + '" class="table table-hover table-striped table-bordered"></table>');
$('table#t_' + name).append('<thead>'+
'<tr>'+
'<th>Product</th>'+
'<th>Price</th>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'</tbody>');
}
});
$('#allContent > tr').each(function(){ // loop on each row in '#allContent' and read '.types' class, then clone this row and remove the type then append it inside the target table using id
var name = $.trim($('.types',this).text());
$(this).clone().find('.types').remove().end().appendTo('table#t_' + name + ' > tbody');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<h4 class="text-center text-danger">Before:</h4>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Type</th>
</tr>
</thead>
<tbody id="allContent">
<tr>
<td>TV</td>
<td>250$</td>
<td class="types">Product</td>
</tr>
<tr>
<td>Channel</td>
<td>1$</td>
<td class="types">Service</td>
</tr>
<tr>
<td>Channel</td>
<td>1$</td>
<td class="types">Service</td>
</tr>
<tr>
<td>DVD</td>
<td>14$</td>
<td class="types">Product</td>
</tr>
<tr>
<td>Support</td>
<td>15$</td>
<td class="types">Team</td>
</tr>
</tbody>
</table>
<h4 class="text-center text-danger">After:</h4>
<div id="dynamicData"></div>

My first thought is make a unique list of the types. Then loop over that list, cloning the original table for each. Then loop through the cloned table and remove everything that you don't want there. Definitely not the most efficient, but it's simple and it works.
let types = [... new Set($('table.original tr td:last-of-type')
.get().map(type => type.textContent))];
//create a container for the cloned tables
$('table.original').after(`<h4>After:</h4><div class="cloned-tables"></div>`)
//loop over types, clone tables, modify accordingly
$.each(types, function(index, type) {
$(`<p class="type">${type}</p>${$('table.original')[0].outerHTML}`)
.appendTo('.cloned-tables')
.find('tr td:last-of-type').each(function() {
if (this.textContent !== type) { this.parentElement.remove(); }
this.remove();
});
});
//remove all type header cells
$(`.cloned-tables table th:last-of-type`).remove();
h4{color: red;}
.type{color: blue;}
<h4>Before:</h4>
<table class="original">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>TV</td>
<td>$250</td>
<td>Product</td>
</tr>
<tr>
<td>Channel</td>
<td>$1</td>
<td>Service</td>
</tr>
<tr>
<td>Channel</td>
<td>$1</td>
<td>Service</td>
</tr>
<tr>
<td>DVD</td>
<td>$14</td>
<td>Product</td>
</tr>
<tr>
<td>Support</td>
<td>$15</td>
<td>Team</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Another thought on using greasemonkey, make sure that the table exist and is populated before you try and do anything with it. Greasemonkey is in a different scope than the original code, so document.ready() is inaccurate. Sometimes things load very asychronously, which will make valid code seem broken. I tend to do something like this:
let loading = setInterval(function() {
if ($('table.original').length) {
clearInterval(loading);
//greasmonkey code here
}
}, 1000);

Count unique values in html table

I'd like to count unique values in a html table.(RGB color)
I'm using a third-party website, which using PHP to write values in the table. I don't have access to the PHP script.
The PHP writes here "{colorcode}" a rgb-to-hex which I defined. I've 5 hex values:
fire: #FF8C00
medical help: #FD0202
hazardous materials: #19070B
other: #4876FF
technical assistance: #0000FF
My goal is, that I can count each color individually and write it in an other table.
Here's my website which shows the table: https://www.feuerwehr-forstern.de/einsaetze/
Table which I want to count.
<table>
<tr style="font-size:16px; background-color:#670200; color:#FFFFFF;">
<th><b>Nr.</b></th>
<th><b>Missionstart</b></th>
<th><b>Title</b></th>
<th><b>Kind of mission</b></th>
<th><b>Place</b></th>
<th></th>
</tr>{liststart}
<tr>
<td style="color:#FFFFFF;" bgcolor={colorcode}><b>{missionnr}</b></td>
<td>{startdate} {starttime}</td>
<td>{missiontitle}</td>
<td>{kind of mission}</td>
<td>{missionplace}</td>
<td><u>{linkreport}</u></td>
</tr>{listend}
</table>
Other table, where I want to write the result of counting after " : ".
<table>
<tr style="font-size:16px; color:#FFFFFF;">
<th style="background-color:#FF8C00;"><b>fire:</b></th>
<th style="background-color:#FD0202;"><b>medical help:</b></th>
<th style="background-color:#19070B;"><b>hazardous materials:</b></th>
<th style="background-color:#4876FF;"><b>other:</b></th>
<th style="background-color:#0000FF;"><b>technical assistance:</b></th>
</tr>
</table>

you can try this : var blue_count = $('[bgcolor=#0000FF]').length to get the count of the td elements that have the bgcolor attribute with the value of #0000FF . then you can append the count value where ever you want.
but this is just the idea for you to solve it... not the best way...
good luck

Here's the new Code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var orange_count = $('[bgcolor=#ff8c00]').size()
$(".important1").text("Brand: " + orange_count);
});
</script>
<script type="text/javascript">
$(function() {
var red_count = $('[bgcolor=#fd0202]').size()
$(".important2").text("First Responder: " + red_count);
});
</script>
<script type="text/javascript">
$(function() {
var black_count = $('[bgcolor=#19070b]').size()
$(".important3").text("Gefahrstoffe: " + black_count);
});
</script>
<script type="text/javascript">
$(function() {
var royalblue_count = $('[bgcolor=#4876ff]').size()
$(".important4").text("Sonstige: " + royalblue_count);
});
</script>
<script type="text/javascript">
$(function() {
var blue_count = $('[bgcolor=#0000FF]').size()
$(".important5").text("Technische Hilfeleistung: " + blue_count);
});
</script>
<table>
<tr style="font-size: 16px; color: #ffffff;">
<th style="background-color: #ff8c00;"><b class="important1">Brand</b></th>
<th style="background-color: #fd0202;"><b class="important2">First Responder</b></th>
<th style="background-color: #19070b;"><b class="important3">Gefahrstoffe</b></th>
<th style="background-color: #4876ff;"><b class="important4">Sonstige</b></th>
<th style="background-color: #0000ff;"><b class="important5">Technische Hilfeleistung</b></th>
</tr>
</table>

I've looked at your code and the link you provided in your question at top,
and in the link the color codes were all Uppercase like this : bgcolor="#4876FF"
so you can't get them with lowercase selectors like this: $('[bgcolor=#4876ff]').size()
you should fix that at first. and then, in every page you only need to check for the document.ready event once. so one of these will do the work :
$(function() {
});
just write your code in one of these blocks.
wish you luck...

How to hide a whole a <div> if table <td> tag is is empty or null?

Currently I am using thymeleaf as a view. I am trying to hide my div if all of my table tags are null or empty. If it is not empty then show the div that will show the table.
Simple Html :
<div id= "myTable1div">
<h3> Test table </h3>
<table id="Table1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr th:each="data, iterStat : ${hostlist}">
<td th:text = "${data.host}"></td>
<td th:text = "${data.id}"></td>
<td th:text = "${data.number}"></td>
</tr>
</tbody>
</table>
</div>
How can I write a javascript, css or Jquery if td is null hide this div?
Basically this would show a table with a header. But if the tags are null it should be just a blank page. Showing nothing that is inside the tag.

You could check if one of td's are empty or null in the ready function using each() method then hide the div using hide() :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
Hope this helps.
Two empty td's case :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td></td>
<td></td>
<td>number</td>
</tr>
</table>
</div>
All td's are empty case :
$(function(){
var hide = true;
$('#Table1 td').each(function(){
var td_content = $(this).text();
if(td_content!=""){
hide = false;
}
})
if(hide){
$('#myTable1div').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTable1div">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Although all the answers here would probably work, they are all tightly coupled (a simple html change will most like stop the javascript code from working as intended) and not reusable. I would recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton # Google Engineer.
If I were to write this, it would probably look a little bit like:
<div id= "myTable1div" class="js-hide-onallempty">
<table id="Table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td class="js-hide-onallempty-data">${data.host}</td>
<td class="js-hide-onallempty-data">${data.id}</td>
<td class="js-hide-onallempty-data">${data.number}</td>
</tr>
</table>
</div>
jQuery:
$(document).ready(function(){
$(".js-hide-onallempty").each(function(){
var $hide = $(this);
var isHidden = true;
$hide.find('.js-hide-onallempty-data').each(function(){
isHidden = $(this).text().trim().length == 0;
return isHidden; // if any element has text then this return false
// and breaks the loop
});
$hide.toggle(isHidden);
});
});

I see you are printing the variables ${data.host}.
Why not check if ${data.host} is empty. if so do not display the table.
In jQuery this can be done as
if(typeof data.host === undefined || data.host === '' || data.host === null)
$("#Table1").hide();
else
// display the table with the data
In vanilla js it can be done like this
if(typeof data.host === undefined || data.host === '' || data.host === null)
$(document.querySelector("#Table1")).style.display = "none";
else
// display the table with the data

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.

Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

How to extract whole table tag using javascript

<div class="test">
<table>
<tr valign="center">
<td></td>
<td>abc </td>
<td>pqr</td>
<td>xyz</td>
</tr>
</table>
HTML text
I have this as string in javascript. I would like to extract the whole of table tag.
<table>
<tr valign="center">
<td></td>
<td>abc </td>
<td>pqr</td>
<td>xyz</td>
</tr>
</table>

Try this:
var tableString = document.getElementsByTagName('table')[0].innerHTML;
With jQuery you could do something like
var tableString = $('div.test table').html();

Not sure what you want...
$('.test table') gives you the table.
$('.test table').html() the html code.
$('.test').html('') removes it from the page.

If by "the whole table tag" you mean the HTML that includes the start and end TABLE tags, then you can do something like:
var table = document.getElementsByTagName('table')[0];
if (table) {
// If outerHTML property available, use it
if (typeof table.outerHTML == 'string') {
return table.outerHTML;
// Otherwise, emualte it
} else {
var div = document.createElement('div');
div.appendChild(table.cloneNode(true));
return div.innerHTML;
}
}