We Keep Coding

filter in jquery to show only firstname td value

$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").parent().siblings(":first").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
Trying to Type something in the input field to search the table for first names
Filtering firstname's td to show only first name matches value into the table. I tried but does not work pls guide
Also explain what's wrong in my code
thanks

If you want to search in the FirstName only. Use can use the following code:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
Remove .parent().siblings(":first") and add .find("td:first") to search for the first td in each row, aka firstname
Demo
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).find("td:first").text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Filterable Table</h2>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</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);
});

jQuery live filtering, how do I return entire rows when matched?

I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.

As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>

Traversing DOM in a table

I have an HTML table that has a delete button in each row of its last column. By clicking on one of these buttons, I would like to be able to delete the whole row in which it is situated. The follow code deletes the button itself but I am unable to get it to delete the whole row:
var bns = document.getElementsByTagName("button");
for (var i = 0; i < bns.length; i++) {
bns[i].addEventListener("click", function()
{
this.parentNode.parentNode.removeChild(this);
});
}
My HTML looks like:
<body>
<table class="table">
<thead>
<tr>
<th>Students</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button>X</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button>X</button></td>
</tr>
</tbody>
</table>

I think it's the removeChild(this) that's the problem. That's being called on the <tr> but it's telling it to delete this which is the button.
Try:
var row = this.parentNode.parentNode;
row.parentNode.removeChild(row);
Alternatively with a framework such as jQuery it would be:
$(this).parent().parent().remove();
Edit
The complete jQuery code is actually nice and short, too:
$(document).ready(function(){
$('button').click(function(){
$(this).parents('tr').remove();
});
});

You can use HTMLTableElement.deleteRow()to delete a HTML table row. I have added an onclick event to each button and it will call deleteRow function which uses rowIndex & deleteRow().It do not require jquery to perform the action
HTML
<table class="table" id="table">
<thead>
<tr>
<th>Students</th>
</tr>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#doe.us</td>
<td><button onclick="deleteRow(this)">X</button></td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john1#doe.us</td>
<td><button onclick="deleteRow(this)">X</button></td>
</tr>
</tbody>
</table>
JS
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table").deleteRow(i);
}
DEMO HERE

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