How can I add a button next to the search field?
This is a list jQuery filter. I have copied this from w3school. The Search is working automatically in this code but I want the search to be done by a button.
It will be very helpful for me if anyone can help me with this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<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>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>
use event click with button:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("click", function() {
var value = $('#myInput').val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<button id="button">Search</button>
<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>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>
Related
I have list of filter table with jQuery. If user is searching the data that existed in the table it will filter and displayed the data. But if user search data that not existed in the data I want to display the not found. How to I displayed the not found in the filter function ?
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
$(document).ready(function(){
// select notFound row
var notFound = $("#notFound")
// make it hidden by default
notFound.hide()
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase()
// select all items
var allItems = $("#myTable tr")
// get list of matched items, (do not toggle them)
var matchedItems = $("#myTable tr").filter(function() {
return $(this).text().toLowerCase().indexOf(value) > -1
});
// hide all items first
allItems.toggle(false)
// then show matched items
matchedItems.toggle(true)
// if no item matched then show notFound row, otherwise hide it
if (matchedItems.length == 0) notFound.show()
else notFound.hide()
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 id="notFound"><td colspan="3">Not Found</td></tr>
<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 have two input tags so for this example I want to have two buttons that can the change color of a text or italicize. In my function I call the button, but they are not unique. My "change color" button will also italicize and vice versa which makes sense. How can I fix this?
$(document).ready(function(){
$("input").click(function(){
$('#myForm [type="text"]').css("color", "red");
});
});
$(document).ready(function(){
$("input").click(function(){
$('#myForm [type="text"]').css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color"></td>
<td><input type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You have to use unique id or classes, I added 2 different classes to buttons italicBtn and colorBtn and changed your click event listeners
PS you don't have to use $(document).ready(function(){ twice, just place your code inside one ready function
$(document).ready(function(){
$(".colorBtn").click(function(){
$('#myForm [type="text"]').css("color", "red");
});
$(".italicBtn").click(function(){
$('#myForm [type="text"]').css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" class="colorBtn" value="change color"></td>
<td><input type="button" class="italicBtn" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You can use a class to distinguish the button or you can use the value property. All with the keyword this that refers to the current button:
$("input").click(function(){
if (this.value == 'change color') {
$(this).css("color", "red");
} else {
$(this).css("font-style", "italic");
}
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color"></td>
<td><input type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You should add a class instead of the inline changes and toggle between the classes with jQuery.
Read more about jQuery's .toggleClass method.
Also, you should use ids to get the button click event and to change the input.
$(document).ready(function(){
$("#button-red").click(function(){
$("#input").toggleClass("red");
});
$("#button-italic").click(function(){
$("#input").toggleClass("italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.red{
color: red;
}
.italic{
font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="input" type="text" value="HELLO WORLD!"></td>
<td><input id="button-red" type="button" value="change color"></td>
<td><input id="button-italic" type="button" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
Give each button a unique id or class and set up the event based on that particular element.
You can do the same thing with the input so that you don't have to search for it by its attribute value.
Lastly, you can set up both event handlers inside of just one document.ready.
$(document).ready(function(){
let $input = $("#input"); // Get the reference to the input just once
$("#color").click(function(){
$input.css("color", "red");
});
$("#italics").click(function(){
$input.css("font-style", "italic");
});
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="input" value="HELLO WORLD!"></td>
<td><input type="button" id="color" value="change color"></td>
<td><input type="button" id="italics" value="italicize"></td>
</tr>
</tbody>
</table>
</form>
You can combine things that are alike each other by using data attributes.
$("input[data-style]").on("click", function() {
var btn = $(this);
$('#myForm [type="text"]').css(btn.data('style'), btn.data('value'));
});
.table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="table">
<thead>
<tr>
<th>text</th>
<th>change color</th>
<th>italicize</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="HELLO WORLD!"></td>
<td><input type="button" value="change color" data-style="color" data-value="red"></td>
<td><input type="button" value="italicize" data-style="font-style" data-value="italic"></td>
</tr>
</tbody>
</table>
</form>
I'm working on a sample to accomplish the following:
Generate an html table of specific data (rows and columns will vary
in length and information).
Include a fixed header (the first two rows of the table should be fixed; with the remaining rows to scroll.
Input box to search all rows for entered letter(s).
Currently I can't get both of these options to work together and after clearing the input box the Search... box disappears. It should stay in the same row, right below the header and span all available columns.
My current test code:
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 50;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<table border="1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>
<input id="myInput" type="text" placeholder="Search..">
</td>
</tr>
<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>
<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>
<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'm more of a vba, sql and C# developer, so this is defiantly outside of my expertise.
I'm not sure how to fix this.
Thanks,
Jeff
I want to hide if the hobby doesn't have value (empty). But if the hobby has value is still show. How to condition it? I try using jQuery.
$("tr:last-child td:last-child").css("font-weight","bold")
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You can hide the .parent() tr if the .text() of the td is blank.
$("tr:last-child td:last-child").each(function(index, td) {
if($(td).text() === ""){
$(td).parent().hide();
}
});
table {
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
tr:last-child td:last-child {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
You need to use text() to get the text of td
$("tr:last-child td:last-child").each(function(index,element){
$(element).css("font-weight","bold");
});
$("tr:last-child td:last-child").each(function(index,element){
if($.trim($(element).text()).length == 0){
$(element).parent().hide();
}
});
table{
border: 1px solid blue;
padding: 4px 8px;
margin:4px 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Name</td>
<td>John</td>
</tr>
<tr>
<td>Hobby</td>
<td>Sleeping</td>
</tr>
</table>
<table>
<tr>
<td>Name</td>
<td>Doe</td>
</tr>
<tr>
<td>Hobby</td>
<td></td>
</tr>
</table>
change this:
if($("tr:last-child td:last-child").length < 1){
$("tr:last-child").hide()
}
to:
if($("tr:last-child td:last-child").text().length < 1){
$("tr:last-child").hide()
}
In my code, when you click on the first <td>, it's checkbox gets selected. But my goal is checkbox should get selected by tr click. So when I click on any <tr> its checkbox will be selected. To do this I already tried to replace on click class ".checktd" to ".odd" but this does not work.
Any idea how can I achieve that?
$(".checktd").on("click", function(e) {
if (this != e.target) {
return;
}
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
</body>
</html>
JsFiddle link if needed.
Modify the this!=e.target And check if it is a checkbox or not.
Change your selector from ".checktd" to "table tr". I would suggest you to use a more specific selector by adding class on table or on tr.
$("table tr").on("click", function(e) {
if($(e.target).is("input[type='checkbox']"))
return;
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
This will work for you
I just removed this code - if (this != e.target) { return; } from your fiddle.
And for following the default action if you clicked on a checkbox I have used event.target.type for checking you clicked a checkbox, This worked fine for me.
$(".odd").on("click", function(e) {
console.log(event.target.type);
if(event.target.type != 'checkbox') {
var check = $(this).find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Hope this was helpful for you.
On click of tr find the input element with name attribute and check if it is checked. If checked then uncheck it using prop else viceversa
$("tr").on("click", function(e) {
if ($(this).find('input[name="checkItem"]')[0].checked) {
$(this).find('input[name="checkItem"]').prop('checked', false)
} else {
$(this).find('input[name="checkItem"]').prop('checked', true)
}
});
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="odd">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Check the JsFiddle with Changes
$("table td").on("click", function (e) {
if (this != e.target) { return; }
var check = $(this).parent("tr").find("input[type=checkbox]");
check.prop('checked', !check[0].checked);
});
Solution