I have a table search but I would like to make an inverse search. In my jQuery code how can I exchange .hide() -> .show() and .show() -> .hide() when a <input type="checkbox" checked> is false. And when checkbox is checked undo everything.
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" checked>
<table id="myTable" border="1">
<thead>
<tr class="myHead">
<th>XDFFD</th>
<th>DFDDY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
$('#myTable').find('tr').each(function() {
if (!($(this).find('td').text().search(patt) >= 0)) {
$(this).not('.myHead').hide();
}
if (($(this).find('td').text().search(patt) >= 0)) {
$(this).show();
}
});
});
You check if the checkbox is checked or not using is(":checked") this will give true or false so depending on this show or hide trs.
Demo Code :
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
var checks = $(".checkbox").is(":checked"); //check if checkbox is checked
console.log(checks)
if (value != "") {
$('#myTable tbody').find('tr').each(function() {
var condition = $(this).find('td').text().search(patt) >= 0
//checked
if (checks) {
//show and hide..
condition ? $(this).show() : $(this).hide()
} else {
condition ? $(this).hide() : $(this).show()
}
});
} else {
$('#myTable tbody > tr').show()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" class="checkbox" checked>
<table id="myTable" border="1">
<thead>
<tr class="myHead">
<th>XDFFD</th>
<th>DFDDY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Here is an alternative version of the same using a little jQuery extension to make :contains() case insensitive:
// jQuery extension from https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0; };
});
$('input').on('input', function() {
$('#myTable tbody tr').each((i,tr)=>$(tr).toggle
( $('td:contains('+$('#search_field').val()+')',tr).length>0 === $(".checkbox").is(":checked") )
)
}).first().focus();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search..." id="search_field">
<input type="checkbox" class="checkbox" checked>
<table id="myTable" border="1">
<thead>
<tr class="myHead">
<th>XDFFD</th>
<th>DFDDY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 one</td>
<td>2 two</td>
</tr>
<tr>
<td>3 Three</td>
<td>4 Four</td>
</tr>
<tr>
<td>5 FIVE</td>
<td>6 SIX</td>
</tr>
</tbody>
</table>
The ===comparison of two booleans is in fact something like an XOR condition between the two expressions. The result will be true if both or none of the expressions
$('td:contains('+$('#search_field').val()+')',tr).length>0
and
$(".checkbox").is(":checked")
are true. And this will be used directly in the .toggle() method to show or hide the current <tr>.
Related
Have one table, and if we checkbox checked amount values automatically sum and displayed on top. Tried below code, its getting values but not getting exact sum values. Could you pls suggest the what is the issue..
checkboxCheckCount(info: any): void {
var creditAmount = 0;
$("#firstTable input:checked").each(function() {
alert(info.index);
if (info.index != "") {
creditAmount += parseFloat(info.index);
} else {
creditAmount = creditAmount;
}
});
Stackblitz
As you are already using each loop to iterate through your checked checkboxes you can use $(this).closest("tr").find("td:eq(1)") this will give you amount column td value and then you can pass same to your creditAmount.
Demo Code :
$('input[type="checkbox"]').on('change', function() {
var creditAmount = 0;
$("#firstTable input:checked").each(function() {
//get td(amount column value)
var values = $(this).closest("tr").find("td:eq(1)").text()
if (values != "") {
creditAmount += parseFloat(values);
}
});
$("#idCheckBoxLabel").text(creditAmount);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div>
<div>Count::<span id="idCheckBoxLabel"></span>
<div>
<div>
<table datatable id="firstTable" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Amount</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkboxCls" name="id"></td>
<td>1</td>
<td>Abc</td>
<td>xyz</td>
</tr>
<tr>
<td><input type="checkbox" class="checkboxCls" name="id"></td>
<td>2</td>
<td>Abc</td>
<td>xyz</td>
</tr>
<tr>
<td><input type="checkbox" class="checkboxCls" name="id"></td>
<td>3</td>
<td>Abc</td>
<td>xyz</td>
</tr>
</tbody>
</table>
</div>
</div>
i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.
user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.
when user uncheck anyone then that checkbox value will be removed from hidden field.
I tried this way but not successful. so guide me how to achieve it. my code as follows
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">
$(document).ready(function(){
$('#chckHead').click(function () {
$(".chcktbl").prop('checked', $(this).prop("checked"));
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function (index, obj) {
alert('pop');
if (this.checked === true) {
values.push($(this).val());
}
});
});
alert(values.toString());
});
You forget to assign the checkboxes values to the hidden input and also, you have to do so in the header checkbox event listener.
$(document).ready(function() {
var hidden = $('#hidden');
$('#chckHead').click(function() {
var state = $(this).prop('checked');
if(state === false) {
hidden.val('');
}
var vals = [];
$('.chcktbl').each(function() {
$(this).prop('checked', state);
if(this.checked === true) {
vals.push($(this).val());
}
});
hidden.val(vals.toString());
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function(index, obj) {
if(this.checked === true) {
values.push($(this).val());
}
});
hidden.val(values.toString());
});
});
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id="chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="101" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="102" />
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="103" />
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hope I pushed you further.
You should be able to get all checked checkboxes with this selector:
$('input[type=checkbox]:checked')
Then you can call map to get all the ids and join them
string = $('input[type=checkbox]:checked').map(function(idx,element) {
return element.value;
}).join(',')
Then just listen the onChange event for all checkboxes and set the value for the hidden field.
I have a table with the class .client-data which contains lots of rows and cells. I want to search the cells and compare if the inner text matches an input value and if true I want to jump the the nearest <tr> tag to the cell that matched the input. I am very new to jQuery so I may be way off here but so far I have the following code:
$('.client-data td').each(function findNext() {
var cellText = $(this).html();
var inputVal = $('#findField').val();
var goTo = cellText.closest('tr').attr('id');
if (cellText == inputVal) {
$(document).scrollTop( $(goTo).offset().top );
}
})
Is that possible?
Suppose this is your html:
<input type="text" id="i">
<table class="client-data">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Feb</td>
<td>$100</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>Mafdrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mafsarch</td>
<td>$100</td>
</tr>
<tr>
<td>Macrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mabxrch</td>
<td>$100</td>
</tr>
<tr>
<td>Mcxbarch</td>
<td>$100</td>
</tr>
<tr>
<td>Mxcbarch</td>
<td>$100</td>
</tr>
<tr>
<td>Mcbbxcarch</td>
<td>$100</td>
</tr>
</table>
your script for searching and scrolling:
// trigger on keyup
$("#i").keyup(function(){
var input = $(this).val();
// scroll to first td that has the input val
$('html, body').animate({
scrollTop: $(".client-data td:contains('"+input+"')").first().offset().top
}, 500);
})
check it out in action here: https://jsbin.com/toyecarigo/edit?html,console,output
$(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'm having some list of HTML check box in the table and its related data. In the list if I have selected a check box that will move to the top of the list.
Below is my code it works in <div> but not in the <table>.
jQuery(function($) {
$('.t1 .group-title').each(function() {
$if(this.checked) {
$item.insertBefore($('.t1 .group-title').first())
} else {
$item.appendTo($item.data('group'))
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
You should bind the change event to checkbox element. Then based of checked state prepend()/append() parent tr element.
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
jQuery(function($) {
$('#t1 :checkbox').on('change', function() {
var tr = $(this).closest('tr');
var tbody = $('#t1 tbody')
if (this.checked) {
tbody.prepend(tr)
} else {
tbody.append(tr)
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
<thead>
<th></th>
<th>Check</th>
<th>ID</th>
<th>Title</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk1">
</td>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk2">
</td>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk3">
</td>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk4">
</td>
<td>4</td>
<td>Title 4</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5">
</td>
<td>5</td>
<td>Title 5</td>
</tr>
</tbody>
</table>
Try this code.
$('table').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
.find('label').html('move to bottom');
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
.find('label').html('move to top');
}
});
First you have to handle the event on change for the checkboxes, and then if the checkbox is checked you should prepend the tr parent to the tbody of your table.
$("#t1 input:checkbox").on("change",function(){
if(this.checked){
$("#t1 tbody").prepend($(this).parents("tr"))
}else{
$("#t1 tbody").append($(this).parents("tr"))
}
})
Here is a fiddle with your example working
https://jsfiddle.net/kLhxq3Lj/