We Keep Coding

JavaScript - Hide first element on add new row on table

I have a List of Products as follows:
<table class="table table-bordered">
<thead class="thead-green">
<tr>
<th>Product Name</th>
<th>Product Model</th>
<th>Description</th>
<th>Price</th>
<th>Add Service</th>
</tr>
</thead>
<tbody>
#if (Products.Any())
{
#foreach (var product in Products)
{
<tr #onclick="(() => SetProductForUpdate(product))">
<td>#product.Name</td>
<td>#product.Name</td>
<td>#product.Description</td>
<td>#product.Price</td>
<td><button style="background-color:#0275d8;" class="btn btn-primary btn-medium" onclick="mirko('dataTable2');">Add</button></td>
</tr>
}
}
else
{
<tr><td colspan="6"><strong>No products available</strong></td></tr>
}
</tbody>
</table>
That gets the following:
if i click the Add button the selected items are added to a table with the following JavaScript function:
function mirko(tableID) {
var table = document.getElementById(tableID)
for (var l = 0; l < 1; l++) {
var cl = table.tBodies[0].rows[l].cloneNode(true)
table.tBodies[0].appendChild(cl)
}
}
And here is the table:
<div class="table-responsive">
<table id="dataTable2" class="table table-striped table-borderless border-0 border-b-2 brc-default-l1">
<thead class="bg-none bgc-default-tp1">
<tr class="text-white">
<th class="opacity-2"><p class="tab">#</p></th>
<th><p class="tab">Name</p></th>
<th><p class="tab">Model</p></th>
<th><p class="tab">Description</p></th>
<th><p class="tab">Qty</p></th>
<th><p class="tab">Unit Price</p></th>
<th width="140"><p class="tab">Amount</p></th>
</tr>
</thead>
<tbody>
<tr id="module">
#*<td>1</td>*#
#* <td>#UpdateProduct.Name</td>
<td>#UpdateProduct.Model</td>
<td>#UpdateProduct.Description</td>
<td>1</td>
<td>#UpdateProduct.Price</td>
<td>#UpdateProduct.Price</td>*#
<td><p class="tab">1</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Description</p></td>
<td><p class="tab">1</p></td>
<td class="tab text-95"><p class="tab">#UpdateProduct.Price</p></td>
<td class="tab text-secondary-d2"><p class="tab">#UpdateProduct.Price</p></td>
</tr>
</tbody>
</table>
</div>
which gets the following with the purpose to generate a price Quotation with the selected products
My issues as shown in the screenshot above, there is always one product empty, which is generated because of this part inside my table (Quotation template): How can i hide, or prevent that?
<tbody>
<tr id="module">
#*<td>1</td>*#
#* <td>#UpdateProduct.Name</td>
<td>#UpdateProduct.Model</td>
<td>#UpdateProduct.Description</td>
<td>1</td>
<td>#UpdateProduct.Price</td>
<td>#UpdateProduct.Price</td>*#
<td><p class="tab">1</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Name</p></td>
<td><p class="tab">#UpdateProduct.Description</p></td>
<td><p class="tab">1</p></td>
<td class="tab text-95"><p class="tab">#UpdateProduct.Price</p></td>
<td class="tab text-secondary-d2"><p class="tab">#UpdateProduct.Price</p></td>
</tr>
</tbody>

Javascript search table rows but ignore search on the hidden collapsible accordion rows

I have a table, there is a toggle feature that uses accordion collapse rows. I have a search function in javascript, but when you search text and that text is not in the hidden rows the toggle doesn't work. It won't display the hidden rows unless there is the search text. Please help!
i need it to do this but with javascript not ajax... http://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.html
My table has two hidden tables, each with a header, within it...
i can id the tr's of the collapsible rows.
So for each row in the table, there are two tables that expand when user select toggler. Two headers will display even if no rows.
Below is javscript for the search functionality that i need to have not search on the collapsible tables
<script type="text/javascript">
$(document).ready(function () {
$(".search").keyup(function () {
var searchTerm = $(".search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {
'containsi': function (elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function (e) {
$(this).attr('visible', 'true');
});
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if (jobCount == '0') { $('.no-result').show(); }
else { $('.no-result').hide(); }
});
});
</script>
html...
<div class="form-group pull-right">
<input type="text" class="search form-control" placeholder="What you looking for?" id="search">
</div>
<span class="counter pull-right"></span>
<table class="table table-hover table-bordered results" id="table">
<thead>
<tr>
<th> </th>
<th>Obj ID</th>
<th>Obj</th>
<th>Init ID</th>
<th>Init</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo_1" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td scope="row">1</td>
<td>Obj 1</td>
<td scope="row">1</td>
<td>Task 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo_1">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_1">
<th>Update ID</th>
<th>Stop Light</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="update_1">
<th scope="row">1</th>
<td>Notes for Update 1</td>
<td>Other Notes for Update 1</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<table class="table table-striped">
<thead>
<tr style="background-color: darkgrey" id="header_2" >
<th>Target Quarter</th>
<th>Added By</th>
<th>Added On</th>
</tr>
</thead>
<tbody>
<tr style="background-color: lightgrey" id="target_1">
<th scope="row">1</th>
<td>User 1</td>
<td>1/1/2017</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Get all <tr> ID in table?

I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.

Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>

Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>

How get grand parent text in a table with jquery

I have some problems in accessing the text about a grand parent td in table.
When I click on delete, I would like that my function accesses the grand parent text : "fabien" but all I received is undefined.
this is my HTML:
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Delete</td>
</tr>
</thead>
<tbody id="tabSelectUser">
<tr>
<td> fabien </td>
<td><a onclick="javascript:aButtonPressed();"> delete</a></td>
</tr> </tbody>
</table>
and this is my function:
<script type="text/javascript">
function aButtonPressed(){
var prevCell = $(this).parent().prev().text();
console.log(prevCell);
</script>

Use Jquery to bind the click event, then your $(this) will work.
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Delete</td>
</tr>
</thead>
<tbody id="tabSelectUser">
<tr>
<td> fabien </td>
<td> delete</td>
</tr> </tbody>
</table>
Javascript:
$(function() {
$('.deleteBtn').click(aButtonPressed);
});
function aButtonPressed(){
var prevCell = $(this).parent().prev().text();
console.log(prevCell);
}

$(".childclass").parents("eq(numberofnthparent)").text();

Arranging The html Tables using Jquery

Lets say I have this table:
<table class="table table-striped table-bordered table-condensed">
<tr>
<th><h1>Tracks</td></th>
</tr>
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
Through JQuery how would arrange the table rows depending on their value? lets say I want to show table rows that only contains a table data value. How would I do that through Jquery?

Here is an example:
$('#search').on('keyup', function() {
var val = $.trim(this.value).toLowerCase();
$('table > tbody > tr:gt(1)').hide();
if (val.length) {
$('table > tbody > tr:gt(1) > td').filter(function() {
return this.innerHTML.toLowerCase().indexOf(val) >= 0;
}).parent().show();
} else $('table > tbody > tr:gt(1)').show();
});
( this will give you some guideline )
Demo
Related refs:
.gt()
parent > child selector
.filter()

As a variant (DEMO):
HTML
<input id="search" type="text">
<table id="table" class="table table-striped table-bordered table-condensed">
<tr>
<th>Track Id</th>
<th>Artist</th>
<th>Track Name</th>
<th>Uploader</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Artist 1</td>
<td>Track Name 1</td>
<td>Uploader 1</td>
<td>Blocked</td>
</tr>
<tr>
<td>2</td>
<td>Artist 2</td>
<td>Track Name 2</td>
<td>Uploader 2</td>
<td>Visible</td>
</tr>
</table>
​JavaScript
$(document).ready(function () {
$('#search').keyup(function () {
$('#table tr').show();
var q = $(this).val().toLowerCase();
$('#table tr:not(:first)').each(function () {
var visible = false;
$('td', this).each(function () {
var content = $(this).text().toLowerCase();
if (content.indexOf(q) != -1) visible = true;
});
$(this).toggle(visible);
});
})
});​
DEMO