We Keep Coding

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>

Can't focus on a <td> element in my table on click event

I have a table and when I click on a button I want to set the contenteditable to true, which I do, and then put focus on the td element so the client sees a cursor blinking in the cell.
I can't seem to get the focus to work on the LicenseName cell. I know the 'tableData' variable contains the correct element, I've checked it in the browser debugger.
Here is what I've tried.
editLicensesDetails = function (e) {
var tableRow = $(e.target).parent().parent();
$(tableRow).css('background-color', '#dff0d8');
$(tableRow).children('[contenteditable]').attr("contenteditable", "true");
var tableData = $(tableRow).children('[contenteditable]')[0];
$(tableData).focus();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableLicenseDetails" style="width:100%;">
<tr>
<th>Edit</th>
<th>Delete</th>
<th>Name</th>
<th>Description</th>
<th>Product</th>
<th>Unit Of Measure</th>
<th>Variable Rate</th>
</tr>
<tr>
<td style="display:none;">#license.LicenseId</td>
<td>
<i class="fa fa-pencil" aria-hidden="true"></i>
</td>
<td>
<i class="fa fa-trash" aria-hidden="true"></i>
</td>
<td contenteditable="false">#license.LicenseName</td>
<td contenteditable="false">#license.LicenseDescription</td>
<td>#license.TradePulseProductName</td>
<td>#license.LicenseUnitOfMeasureTypeName</td>
<td>#license.IsVariableRate</td>
</tr>
</table>

Your code is working correctly. That means something is wrong when you calling the editLicensesDetails function
var tableRow = $('tr');
$(tableRow).css('background-color', '#dff0d8');
$(tableRow).children('[contenteditable]').attr("contenteditable", "true");
var tableData = $(tableRow).children('[contenteditable]')[0];
$(tableData).focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td contenteditable="false">LicenseName</td>
<td contenteditable="false">LicenseDescription</td>
</tr>
</table>

I want to add a class attribute to row of table and remove this attribute from other sibling row by jquery

I want to add a class="selected" attribute to a row click by user and remove this attribute from other siblings. Because I will get this row by its class attribute on a button click. I have tried so many j Queries but no j Query is working. Please give me a solution which can help me out.
This is my table on loading the page
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>121</td>
<td>register121</td>
<td>34344</td>
</tr>
</tbody>
</table>

$('tr').click(function() {
$('tr').removeClass('selected'); //remove the class from all tr
$(this).addClass('selected'); //add to clicked tr
})
.selected {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
</tbody>
</table>

using jQuery:
var lastSelected;
$("table tr").click(function() {
$(lastSelected).removeClass("selected");
$(this).addClass("selected");
lastSelected = this;
});
jsFiddle

You can do it in following way:
$(document).ready(function() {
$("#saptable tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
.selected {
background: gray
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="saptable">
<thead>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>SAP Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
121
</td>
<td>
register121
</td>
<td>
34344
</td>
</tr>
<tr>
<td>
222
</td>
<td>
register222
</td>
<td>
78778
</td>
</tr>
</tbody>
</table>

There is a siblings() method to search for siblings.
$("#saptable tbody > tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});

You can first remove class from all tr and then add to the current.
$('#saptable tbody tr').click(function(){
$('#saptable tbody tr').removeClass('selected');
$(this).addClass('selected');
});
You can keep the last selected row and remove the selected only from this row instead of removing from all rows. It will be more efficient solution.
$prevRow = null;
$('#saptable tbody tr').click(function(){
if($prevRow != null)
$prevRow.removeClass('selected');
$(this).addClass('selected');
$prevRow = $(this);
});

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();

Delete <tr> using jQuery

<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
Javascript code:
var service = {
removeRow:function(id){
/* alert(id) == [object HTMLTableRowElement]*/
$("#"+id).remove();
}
}
Console Error:
Error: Syntax error, unrecognized expression: #[object
HTMLTableRowElement]
I want to delete table row, please help.

You are passing identifiers not strings.
Consequently, the horrible IE4ism that has somehow made it into HTML which causes every element with an id to create a global JS variable with the same ID is giving you the <tr> elements themselves.
When you "#"+id you convert the HTML Element object into a string, which is [object HTMLTableRowElement]
Put quotes around the IDs you are passing.
service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')

You need to quote the IDs when you have them in your html like that:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
or better yet, don't inline your event handlers and do it all in JS:
$('#fieldList a').on('click', function (e) {
$(this).closest('tr').remove();
});
which has the side effect of neater html:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td> <i class="fa fa-delete"></i>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td> <i class="fa fa-delete"></i></td>
</tr>
</tbody>
</table>

You can simplify your code by referencing the parent tr, not directly, but starting from the child td using jQuery closest.
HTML:
<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
Code:
var service = {
removeRow:function(el){
$(el).closest('tr').remove();
}
}
In this way you can avoid to hard code its id.
Demo: http://jsfiddle.net/IrvinDominin/keLnN/

If you want to delete the row, where is the button, the better way is to use "this", not hardcoded the Row's IDs, because if ID is different - you need to change the function.
Set all a-tags to be:
<a onclick="service.removeRow(this);" href="javascript:void(0);">
then, the function will be:
var service = {
removeRow:function(td){
$(td).closest("tr").remove();
}
}

change the mark up like this...
onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');
hope it solves!

Try this:
$('"#'+id+'"').remove();

Create <a> tags like below
<a class="removeRow" href="javascript:void(0);">
then in Jquery
$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});

You need to remove a child from its parent node so here is a small example
<!DOCTYPE html>
<html>
<body>
<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>
<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1");
child.parentNode.removeChild(child);
</script>
</body>
</html>
Actually here i have a table with a id of table1 as you can see...
in script i defined a variable with the name of child ...
now in last line child.parentNode.removeChild(child); child is the name of variable that we define earlier... after then parentNode will search for its parent node of child that is table and after then the removeCHILD will remove the child...
hope you understood! thanks