jQuery search from the begining of input of value in first column - javascript

I have a very simple dynamic table search script
What I'm trying to figure out is, how do I make it search from the begining of the value?
eg. I only want it to show the row with the word london in it if one were to search it as lo or lon, currently if you type in on, or ondon it'll return true.
also with this example, how do I force it to only search the first column of each row?
$(document).ready(function() {
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').hide();
$('table tbody tr').filter(':contains("' + text + '")').show();
}
});
});
th {
cursor: pointer;
text-align: left;
}
td {
width: 100px;
}
input[type="text"] {
padding: 10px 5px;
margin: 25px 0;
font-size: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search">
<input type="text" placeholder="search somethingn" />
</div>
<table id="items">
<thead>
<th>item</th>
<th>something else</th>
</thead>
<tbody>
<tr>
<td>london</td>
<td>test</td>
</tr>
<tr>
<td>new york</td>
<td>test 2</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/8p4w62pe/

There is no built in startsWith selector, but you can write your own:
$.extend($.expr[":"], {
"startsWith": function(elem, i, data, set) {
var text = $.trim($(elem).text()),term = data[3];
return text.indexOf(term) === 0;
},
});
You will also need to change your selector to select the td (not the tr). To only select the first td add :first-child to the selector. Then change the show() to apply to the parent using parent():
$('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();
Full code:
$(document).ready(function() {
$.extend($.expr[":"], {
"startsWith": function(elem, i, data, set) {
var text = $.trim($(elem).text()),term = data[3];
return text.indexOf(term) === 0;
},
});
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').hide();
$('table tbody tr td:first-child').filter(':startsWith("' + text + '")').parent().show();
}
});
});
Working JS Fiddle

You can loop each of the row, get the first column and then hide the whole row if substring can't be found
$(document).ready(function() {
$('#search input').keyup(function() {
var text = $(this).val();
if (text != null) {
$('table tbody tr').each(function() {
if($(this).find("td:first-child").html().indexOf(text) === -1) {
$(this).hide();
}
});
}
});
});

Related

Search through Table Cells

I have a table which is hidden which contains 1272 rows and within it 3 columns with a
Store Name
Postcode
Button
The script is meant to search for all td cells for either a store name or a postcode and is not returning the desired results.
This is a link to the search
Advice appreciated
$("#searchterm").on("keyup", function() {
var value = $.trim($(this).val().toLowerCase());
$("table#participating_stores tr:gt(0)").each(function(index) {
if (index !== 0) {
$row = $(this);
var $tdElement = $row.find("td");
var id = $.trim($tdElement.text().toLowerCase())
var matchedIndex = id.indexOf(value);
if (matchedIndex != 0) {
$row.hide();
}
else {
//highlight matching text, passing element and matched text
$row.show();
}
}
});
});
I think this is what you are looking for. I've made this runnable snippet which hopefully makes things more clear for you and anyone else trying to think about this problem.
$("#searchterm").on("keyup", function() {
var value = $(this).val();
$("table tr:not(:first)").show().filter(function(index) {
return $(this).find("td").text().indexOf(value) == -1;
}).hide();
});
table, tr, td, th{
border: 1px solid black;
padding: 3px;
}
table th{
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>Postal Code</th><th>Store Name</th></tr>
<tr><td>12345</td><td>store name</td></tr>
<tr><td>99999</td><td>another store name</td></tr>
<tr><td>54321</td><td>yet another name</td></tr>
<tr><td>34343</td><td>4th name</td></tr>
<tr><td>87898</td><td>fifth name</td></tr>
</table>
<br />
<input type="text" id="searchterm" placeholder="search"></input>

Case-sensitive Live Search on a Table with jQuery

I have a Live Search on a Table using jQuery. It works really well but is not case sensitive so jim will not show the same as Jim.
Demo: http://jsfiddle.net/qxks62x9/
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $.map($row.find('td'), function(element) {
return $(element).text()
}).join(' ');
if (id.indexOf(value) <0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
table, tr, td, th{
border: 1px solid blue;
padding: 2px;
}
table th{
background-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr>
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr>
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr>
</table>
<br />
<input type="text" id="search" placeholder=" live search"></input>
You can just lowercase both strings.
Fiddle: https://jsfiddle.net/maq2xmrv/
(id.toLowerCase().indexOf(value.toLowerCase()) < 0)

selecting td first child from tr is not getting

$(function () {
$("tr").click(function () {
$(this).addClass("selected");
});
//************** for left working***************//
$("button").click(function () {
var CurrentTrId = $("tr.selected").attr("data-id");
var ParrentTrId = (CurrentTrId) - 1;
if (ParrentTrId == 0) {
return
}
var CurrentTrLeftValue = parseInt($(".selected > td:first-child ").css("padding-left"));
console.log(CurrentTrLeftValue);
var ParrentTrLeftValue = parseInt($("tr[data-id='" + parrentid + "']td:first-child").css("padding-left"));
if (NewCurrentTrLeftValue == ParrentTrLeftValue) {
if (CurrentTrLeftValue <= 40) {
CurrentTrLeftValue = (CurrentTrLeftValue + 20);
$(".selected > td:first-child").css({ "padding-left": CurrentTrLeftValue });
$(".selected > td:first-child").addClass("normal");
$('#', ParrentTrId).addClass('bold');
}
} });
})
.table {
position:static;
width:100%;
border-collapse:collapse;
}
.table td {
border: 1px solid;
border-color: lightgray;
height: 17px;
}
.selected{
background-color:lightskyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>hi</td> <td>hi</td>
</tr>
<tr>
<td>me</td> <td>me</td>
</tr>
<tr>
<td>you</td> <td>you</td>
</tr>
</table>
<button>clickme</button>
i want select td:first child from my tr i use this code
var LeftValue = parseInt($("tr[data-id='" + parrentid + "'] > td:first-child").css("padding-left"));
but its not taken is there any method for this?
the "parrentid is a variable which store the parrent data-id"
i have a table and a button i want move my selectable tr content into 20 px left on click the button first time. on second click i want move it 20px again(total40px). i write some code here
Use :first-child to select the first child
var LeftValue = $("tr[data-id='1'] td:first-child").text();
alert(LeftValue)
JSFIDDLE
Make sure this selector returns data
$("tr[data-id='" + parrentid + "'] > td:first-child");
If not then use this
$("tr[data-id='" + parrentid + "'] td:first-child");
And then make sure that
parseInt($("tr[data-id='" + parrentid + "'] > td:first-child").css("padding-left")); doesnt return string like '123px'
Usually the error : "Uncaught ReferenceError: $ is not defined" occurs when Jquery library has not been included in the HTML page.
You can use the following code to include the Jquery file and then try :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

How to highlight a column in html table on click using js or jquery?

I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?
Working code for highlighting row:
Table Highlight POC
<script>
function highlight() {
var table = document.getElementById('dataTable');
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function () {
if (!this.hilite) {
this.origColor = this.style.backgroundColor;
this.style.backgroundColor = '#BCD4EC';
this.hilite = true;
}
else {
this.style.backgroundColor = this.origColor;
this.hilite = false;
}
}
}
}
</script>
<style>
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
</style>
</head>
<body>
<table id="dataTable">
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>
</body>
</html>
You can use the following code:
$('td').on('click', function() {
var $currentTable = $(this).closest('table');
var index = $(this).index();
$currentTable.find('td').removeClass('selected');
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to $('#myTable td').
Also dont forget to add the .selected{ background-color: #ace; } class in yor css file.
Here is the working example.
Cheers!
Please try this:
$("#dataTable tr td").click(function() {
//Reset
$("#dataTable td").removeClass("highlight");
//Add highlight class to new column
var index = $(this).index();
$("#dataTable tr").each(function(i, tr) {
$(tr).find('td').eq(index).addClass("highlight");
});
});
.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="dataTable">
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
</table>
A fork Fisnik Tahiri solution to support also the tr selection (based on css or jquery if you preferir)
css:
.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }
Js:
$('td').on('mouseenter', function() {
var $currentTable = $(this).closest('table');
//var $row = $(this).closest('tr');
var index = $(this).index();
//clean
$currentTable.find('td').removeClass('selected');
//select row if you want use js
//$currentTable.find('tr').removeClass('selected');
//$row.addClass('selected');
//select column
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
working example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onclick highlight</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$( ".table tr" ).click(function(){
$(".table tr" ).css("background-color","white");
$(this).css("background-color","green");
});
});
</script>
</head>
<body>
<table class="table">
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
</table>
</body>
</html>

Remove <tr> if the <td> does not contain the value of the <input>

I'm trying to implement a live search (filtering) feature with jQuery for a table. The table contains a list of people and their grad year and high school. When the user starts typing inside the search input, the table will start filtering out all the rows that do not contain the value of the search input. It will also add the class of highlight to the td that the searched text was in.
How can I filter each row and highlight the td element when the user searches something? I tried implementing this with the code below but to no avail. What can I tweak in this code to get this working correctly?
Below is my code. Here is my jsFiddle: http://jsfiddle.net/mikerodriguez/jybrnt22/2/
jQuery
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_element = $("#search_table tbody tr td");
if(input !== td_element.text()){
row.hide();
}else{
row.show();
td_element().addClass("highlight");
}
})
});
CSS
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.search_field {
padding: 15px;
}
.search_field input[type="text"] {
padding: 15px;
width: 98%;
font-size: 18px;
}
.search_table_container {
padding: 15px;
}
.search_table {
width: 100%;
}
.search_table th {
background-color: #AAA;
font-weight: bold;
padding: 10px 0px;
}
.search_table td {
text-align: center;
background-color: #CCC;
padding: 15px 0px;
}
HTML
<div class="search_field">
<input type="text" id="search" placeholder="Search for Person, Class, or High School">
</div>
<div class="search_table_container">
<table id="search_table" class="search_table">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>High School</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>2014</td>
<td>Some High School</td>
</tr>
<tr>
<td>Homer Simpson</td>
<td>2015</td>
<td>Springfield High School</td>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>2050</td>
<td>Looney Tunes High School</td>
</tr>
<tr>
<td>George Washington</td>
<td>1749</td>
<td>Georgetown Academy</td>
</tr>
<tr>
<td>Marty McFly</td>
<td>1991</td>
<td>Back to the Future</td>
</tr>
<tr>
<td>Doc Emmet Brown</td>
<td>1965</td>
<td>One Point Twenty-one Gigawatts</td>
</tr>
</tbody>
</table>
</div>
One problem is:
input !== td_element.text()
You're comparing partial input values to the entire contents of your columns. Instead it should be something like
td_element.text().indexOf(input) == -1
But there were actually quite a few issues (including simple syntax errors, e.g., td_element is not a function). I tweaked your example to something that works: http://jsfiddle.net/gh5kjku5/2/
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_elements = row.find('td');
var colText = td_elements.text();
if(colText.indexOf(input) == -1){
row.hide();
}else{
row.show();
td_elements.addClass("highlight");
}
})});
You'll need to do a bit more work to do things like reset the td background colors when the search box is cleared. Good luck!
hi try this it's working.
$("#search").on("keyup", function () {
var input = $(this).val();
if (input == '') {
$("#search_table tbody tr").show();
} else {
$("#search_table tbody tr").show();
$("#search_table tbody tr").each(function () {
var row = $(this);
var td_element = $("#search_table tbody tr td");
if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
row.hide();
} else {
row.show();
}
});
}
});
see jsfiddle link http://jsfiddle.net/jybrnt22/14/

Categories

Resources