We Keep Coding

treeview not working properly in html table

I have the following table in html:
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title" id="section-title">
{{$inventory_name}} - {{ $category_name }}
</h4>
<div class="table-responsive">
<table class="table table-striped" id="medstable">
<thead>
<tr class="header">
<th>
Nume
</th>
#if ($inventory_id == 1 || $inventory_id == 2)
<th>Cantitate Totala</th>
#endif
</tr>
</thead>
<tbody>
#if( !empty($items) )
#php
$i = 0;
#endphp
#foreach ($items as $item)
<tr data-count="{{ $loop->index }}">
<td> {{$item->name}}</td>
#if ($inventory_id == 1)
<td>150 / {{$minimum_quantities_farm[$i]->quantity ?? 0}}</td>
#php
$i++;
#endphp
#endif
#if ($inventory_id == 2)
<td>150 / {{$minimum_quantities_stoc3[$i]->quantity ?? 0}}</td>
#php
$i++;
#endphp
#endif
</tr>
<tr class="treeview tr-{{ $loop->index }}">
<td colspan="100%">
<table>
<thead>
<tr>
#if ($item->category_id == 1)
<th>Cod CIM</th>
#endif
<th>Cod Produs</th>
<th>Cantitate</th>
<th>Termen Valab</th>
<th>Lot</th>
<th>UM</th>
<th>Pret Unitar</th>
<th>TVA</th>
<th>Pret TVA</th>
</tr>
</thead>
<tbody>
#if( !empty($item_stock[$item->name]))
#foreach($item_stock[$item->name] as $inItem)
#if($inItem['quantity'] > 0)
<tr>
#if ( $inItem['category_id'] == 1)
<td>{{$inItem['cim_code']}}</td>
#endif
<td>{{$inItem['product_code']}}</td>
<td>{{$inItem['quantity']}}</td>
#if ((new \DateTime($inItem['exp_date']))->format('Y-m-d') > (new \DateTime())->format('Y-m-d'))
<td>{{$newDate = date("d-m-Y", strtotime($inItem['exp_date'])); }}</td>
#else
<td style="color:red; font-weight: bold;">EXPIRED</td>
#endif
<td>{{$inItem['lot']}}</td>
<td>{{$inItem['m_name']}}</td>
<td>{{$inItem['price']}}</td>
<td>{{$inItem['tva']}}</td>
<td>{{$inItem['tva_price']}}</td>
</tr>
#endif
#endforeach
#endif
</tbody>
</table>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
</div>
</div>
</div>
I also have this input bar in which I can search through the table's items:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..">
Below is the JavaScript myFunction() function:
function myFunction() {
let input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("medstable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
The thing is, whenever I click on a row, the row should expand and display the values that are basically hidden (until I press on a row). It works fine, but for example, if I search for an item and I find it, if I click on it, the row will not expand anymore. How can I solve this? I also have this JavaScript function that basically expands the row:
function treeviewDisplay() {
jQuery('#medstable tbody tr:not(.treeview)').click(function() {
const treeview = jQuery('#medstable tbody tr.treeview.tr-' + jQuery(this).data('count'));
if( treeview.hasClass('active') ) {
treeview.removeClass('active');
} else {
jQuery('#medstable tbody tr.treeview').removeClass('active');
treeview.addClass('active');
}
});
}
And the css:
tr.treeview {
display:none;
transition: 0.5 all;
}
tr.treeview.active{
display: table-row;
}
tr.treeview table{
width: 100%;
}
P.S: I left the embedded php in the table, maybe it will help. If not, I can change to some hardcoded data
EDIT: I read the question again and I thought I should explain in better. So, if I don't search for anything, on any item I would click, the row expands with the data. However, if I search for the second item for example, the table is gonna show only the second item. And if I click on it, it won't expand. The rows only expand when you don't search for anything. I want them to expand even if I search for something

Add another search field in function

I have a function that works perfectly
But the need arose, to add another field to the research, I do not know how to solve. It has a checkbox in the form, if it is filled, it fetches the data true in the table, if not the data false, how to add in the code below? I'm in doubt, if at all possible.
function myFunction2() {
var input, filter, table, tr, td, i, filtro;
input = document.getElementById("busca2");
filter = input.value.toUpperCase();
table = document.getElementById("tablepesquisa2");
tr = table.getElementsByTagName("tr");
filtro = document.getElementById("filtroPesquisa2").value;
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<div class="form-group">
<div class="col-sm-3">
<select id="filtroPesquisa2" class="form-control">
<option value="0">Código</option>
<option value="1">Descrição</option>
</select>
</div>
<div class="col-sm-7">
<input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2();" class="form-control" />
</div>
</div>
<div class="modal-body">
<div class="table-overflow col-sm-12">
<table class="table table-responsive table-hover" id="tablepesquisa2">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Produto) {
<tr>
<td>#item.Codigo</td>
<td>#item.nome</td>
<td align="right">
<i class="fa fa-check-circle fa-lg"></i>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="col-sm-3" style="text-align:left;">
<input type="checkbox" asp-for="Produtos" name="Produtos" id="Produtos"/>
<label asp-for="Produtos" class="control-label"></label>
<span asp-validation-for="Produtos" class="text-danger"></span>
</div>
<div class="col-sm-3" style="text-align:left;">
<input type="checkbox" asp-for="Servico" name="Servico" id="Servico"/>
<label asp-for="Servico" class="control-label"></label>
<span asp-validation-for="Servico" class="text-danger"></span>
</div>
In this table, have these two fields, then need to be filtered if they are marked or not, if product is marked, have to bring only the fields where product = true, and if it is the other, only the fields that the other is true
EDIT
I managed to solve, just by selecting the correct column and comparing to true

I solved the problem by doing this way:
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[filtro];
td1 = tr[i].getElementsByTagName("td")[4];
td2 = tr[i].getElementsByTagName("td")[3];
var tbBoolean = ($(td2).text() == "True" ? true : false);
if ($('#Venda').prop("checked") == true) {
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 && $(td1).text() == idEmpresa || $(td1).text() == "") {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
else {
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1 && tbBoolean == false) {
if ($(td1).text() == idEmpresa || $(td1).text() == "") {
tr[i].style.display = "";
}
} else {
tr[i].style.display = "none";
}
}
}
}

why my javascript code dosen't work(about search and filter bar)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>a1</title>
<link rel="stylesheet" href="a1.css" />
<script src="a1.js"></script>
</head>
<body>
<form id = "gallary" method="get" action="">
<div id="searchBox">
<input type="text" id="searchBar" placeholder="Search titles" />
<input type="submit" id="searchBtn" value="search" onclick="searchFunction()"/>
<select name="genre" id ="filterBar">
<option>Genre</option>
<option>Baroque</option>
<option>Mannerism</option>
<option>Neo-classicism</option>
<option>Realisim</option>
<option>Romanticism</option>
</select>
<input type="submit" id = "filterBtn" value="filter" onclick =
"filterFunction()" />
</div>
</form>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="05030.jpg"/></td>
<td>Death of Marat</td>
<td>David, Jacques-Louis</td>
<td>1793</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="120010.jpg"/></td>
<td>Potrait of Eleanor of Toledo</td>
<td>Bronzino, Agnolo</td>
<td>1545</td>
<td>Mannerism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="07020.jpg"/></td>
<td>Liberty leading the people</td>
<td>Delacroix, Eugene</td>
<td>1830</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="13030.jpg"/></td>
<td>Arrangement in Grey and Black</td>
<td>Whistler, James Abbott</td>
<td>1871</td>
<td>Realisim</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="06010.jpg"/></td>
<td>Mademoiselle Caroline Riviere</td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-classicism</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
enter code here
above is my HTML code.
the searchBar is for searcing titles(the second column of tbody), the filter is for filtering genres(the fourth column of tbody).
I want to search and filter some specific content form the table and use on-click to trigger my functions but it didn't work. Can anyone help me?
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementByTagName("tr");
var td;
var filter = document.getElementById("filterBar").value;
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[1];
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}

You are setting the values of 'input', 'tbody','tr', and 'td' at the start of the script. These get evaluated when the script is loaded but destroyed when the the script file is finished loading. That is the "searchFunction" does not know about the values of these tags.
Consider the updated code: (see it in action at: Plunker)
<script type="text/javascript">
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
console.log(input);
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
var filter = document.getElementById("filterBar").value;
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
} // <-- Missing
}
</script>

display style for table row to stay aligned with header

I have a table and using javascript I give the user the option to remove table rows from the table by putting the display style to none.
If the user wants to see the rows again, I need to put the display style away from none and my problem is that I don't know what style to use. I thought table-row-group is the most sensible, but it messes up the rows...
I created a fiddle here and copied the code below
https://jsfiddle.net/b2s3dpo5/#&togetherjs=7EwfsBJIfw
<fieldset style="display: inline-block;">
<div style="display: inline-block;">
<input type="checkbox" name="{{ category.name }}" id="category" checked> remove rows
</div>
</fieldset>
<div class="panel panel-default col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th><strong>ID</strong></th>
<th><strong>test test test</strong></th>
<th><strong>Institute/Organisation</strong></th>
<th><strong>test deadline test</strong></th>
</tr>
</thead>
<tbody>
<tr class="category">
<th class="col-xs-1" scope="row">
test
</th>
<td class="col-xs-5">
test
</td>
<td class="col-xs-4">
test
</td>
<td class="col-xs-2">
test
</td>
</tr>
</tbody>
</table>
</div>
and the necessary javascript
document.getElementById('category').onclick = function() {
toggleSub_by_class(this, 'category');
};
function toggleSub_by_class(box, select_class) {
// get reference to related content to display/hide
var el = document.getElementsByClassName(select_class);
var flag;
if (box.checked) {
for (var i = 0, j = el.length; i < j; i++) {
el[i].style.display = 'table-row-group';
}
} else {
for (var i = 0, j = el.length; i < j; i++) {
var classList = el[i].className.split(' ')
flag = 0
for (var h = 0, k = classList.length; h < k; h++) {
if (document.getElementById(classList[h])) {
if (document.getElementById(classList[h]).checked) {
flag = 1
}
}
}
if (flag == 0) {
el[i].style.display = 'none';
}
}
}
}

Try visibility:hidden or height:0px or both.

I figured it out myself... the correct display style is empty
el[i].style.display = '';
that works fine for me
carl

First off, for readability purposes, try to create more concise headers when you share it with the rest of the community (although I understand that this is not a big deal).
I would try
visibility:hidden

Using Javascript How to loop through a div containing checkboxes and get the value checked from each check box

I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?

Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr