Display correct value when searching table with multiple rows - javascript

Currently I'm using this bit of Javascript to search an HTML table for matching data in a certain cell.
function searchTable(inputVal) {
var table = $('#tblData');
table.find('tr').each(function(index, row) {
var allCells = $(row).find('td');
if(allCells.length > 0) {
var found = false;
allCells.each(function(index, td) {
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text())) {
found = true;
return false;
}
});
if(found == true){
$(row).show("highlight");
}
else {
$(row).hide("highlight");
}
}
});
}
The table is setup in the following structure:
<tr>
<td>value1</td>
<td>value2</td>
</tr>
So, when searching for value1, the entire row displays - including value2.
I can't figure out how to get value2 to not display. I was trying to assign a different id for each and then using javascript to display:none, but there are a lot of different rows and it seems like a lot of manual work for something obvious that I might be missing.
Any help is appreciated.
EDIT: Additionally, if anyone is up for it - I'm also trying to figure out how to ignore punctuation when someone searches for a value as well. Right now if the value is "that's" and someone searches "thats", it won't find a match.

This updated code will only show columns that are "found." I think you might want to be adding css classes instead of showing and hiding. The commented text shows how to add and remove the "highlight" class.
function searchTable(inputVal) {
var table = $('#tblData');
table.find('tr').each(function (index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function (index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
$(this).show();
//$(this).addClass('highlight');
} else {
$(this).hide();
//$(this).removeClass('highlight');
}
});
}
});
}
jsFiddle
I don't know if you have future purpose for looping through the rows, but your code can be simplified to this:
function searchTable(inputVal) {
$('#tblData tr td').each(function (index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
//$(this).show();
$(this).addClass('highlight');
} else {
//$(this).hide();
$(this).removeClass('highlight');
}
});
}
jsFiddle

Related

how to find duplicate dropdown row in a table using jquery?

There is a table which contains an user dropdown per row. Needs to prevent of selecting duplicate users of dropdown in the table.
While selecting the duplicate user in the above table as "easy",The js code should keep the first of user dropdowm the rest of duplicate user dropdown wants to remove from table.
HTML
Javascript Code
function checkDuplicateUserId(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($('tbody#data tr select').find('option[value="' + $(this).val() + '"]').size() > 1) {
alert();
}
});
}
function checkAlreadySelected(obj){
checkDuplicateUserId(obj);
var num = parseInt($(obj).attr('num'));
var user_id=$("#"+obj.id+" option:selected").val();
var next_user_id=$("#user_id_"+eval(num+1)+" option:selected").val();
if(user_id && typeof next_user_id == 'undefined'){
var row = updateSrNo(num);
$("#data").append(row);
}
}
As i mentioned in the js code, I have written a function as called as checkDuplicateUserId() to detect the duplicate dropdown from the table, Unfortunately the alert() not prompted while select the duplicate users.
What's the issue of jquery code which i have written wrongly there?
If you have other way to accomplish this, Please say it
Thanks in advance
Try this:
function checkDuplicateUserId(obj){
var user_id=$("#" +obj.id + " option:selected").val();
if( $('tbody#data tr select option:selected').filter( function(){ if( $(this).val() == user_id ) return true; } ).length > 1) {
alert('something');
}
}
You can do something like this:
function checkAlreadySelected(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($(this).val()==user_id) {
return false ;
}
});
return true ;
}

Adding select/deselect all to dynamic tabular form

I have a form which contains buttons to add and delete rows. My javascript function to check all checkboxes works for the first row, but once I add more rows to the form, the first row is still the only one that gets checked.
Any tips?
Here is my javascript function:
<code>
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var on = false;
if(masterCheck.checked==true) {
document.getElementById('checkbox').checked=true;
} else {
document.getElementById('checkbox').checked=false;
}
}
</code>
And here is the form:
http://crimsonroot.com/files/freelance/new.html
Any help is appreciated!
I found out what was wrong! #Mohammed your answer really helped. There were just one or two syntax errors that I found. In order to check and uncheck all of the boxes, I needed to add a boolean variable as an input to the function as follows:
//checks all rows
function checkAll(bool) {
var masterCheck = document.getElementById('masterCheck');
var allcheck = document.getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allcheck[i].checked = true;
} else {
allcheck[i].checked = false;
}
}
}
For some reason, this was the final piece to the puzzle. Thanks for all of the help!
You should try something like this.
$("#masterCheck").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
Since document.getElementById() returns first element, because id cannot be used more than one. To make it usable, add a class checkbox and try the following code:
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var allcheck = getElementsByClassName('checkbox');
var on = false;
for (var i = 0; i < allcheck.length; i++) {
if (masterCheck.checked == true) {
allchecked[i].checked = true;
} else {
allchecked[i].checked = false;
}
}
}

Change a variable value inside a Jquery .filter() function

I have a table which has id 'myTable'. Now there is a textbox in which I write down the item name to find whether it exists in the myTable cell or not. To do this I have written the following code -
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){retval=1;alert('Same item found');}
else{retval=0;}
});
The problem is that, when it finds the same item in the table cell it shows the alertbox. But the value of my variable retval never changes. It always shows 0. How can I solve it?
I think what you are trying to accomplish could be done by using :contains() selector, like this:
var search = $("#searchitem").val().trim();
var retval = $("table#myTable tr td:contains('"+search+"'") ? 1 : 0;
I haven't tested it but I'm almost sure it works. It's a much more cleaner approach and surely more readable.
jQuery :contains() docs: http://api.jquery.com/contains-selector/
please try return false like this
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){
retval=1;
alert('Same item found');
return false;
}else{
retval=0;
}
});
change the variable value only if found , because you assign the variable to 0 at the beginning.
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){
retval=1;
alert('Same item found');
}
});
Try this code
var search = $("#searchitem").val().trim();
var filteredData = $("table#myTable tr td").filter(function(element, index)
{
return $(element).text() == search;
});
now this code return array of TD elements which satisfy the condition.

Jquery: hiding empty table rows

I am trying to write a script that detects if a tables tds are empty and if they are hide the parent tr
I've searched Stack Overflow and found other scripts but none seem to work for me.
So far I have:
$(".table tr").each(function() {
var cell = $(this).find('td').html();
if (cell == null){
console.log('empty');
$(this).parent().addClass('nodisplay');
}
});
but just can't get it working. Any advice would be appreciated!
Fiddle: http://jsfiddle.net/MeltingDog/S8CUa/1/
Try this -
$("table tr td").each(function() {
var cell = $(this);
if ($(cell).text().length == 0){
console.log('empty');
$(this).parent().addClass('nodisplay');
}
});
Demo
you should try this.
jQuery(document).ready(function(e) {
jQuery(jQuery('table tr td:empty').parents('tr')).addClass('nodisplay');
});
.html() only returns the content of the first matched element, so if your rows have more than one cell this wouldn't work. .text() might be a better fix, unless you have images or other empty tags in the cells.
$("table tr").each(function() {
var cell = $.trim($(this).find('td').text());
if (cell.length == 0){
console.log('empty');
$(this).addClass('nodisplay');
}
});
DEMO
It seems you want to hide rows that have only whitespace content (but the cells might have other element child nodes). Using plain javascript:
var rows = document.getElementsByTagName('tr');
var i = rows.length;
while (i--) {
if ( !trim(getText(rows[i])) ) {
rows[i].className += ' nodisplay';
}
}
Helpers:
function trim(s) {
return s.replace(/(^\s*)|(\s*$)/g, '');
}
function getText(el) {
if (typeof el.textContent == 'string') {
return el.textContent;
} else if (typeof el.innerText == 'string') {
return el.innerText;
}
}
$('table tr').each(function(){
var hide = true;
$('td',this).each(function(){
if ($.trim($(this).text()) != "")
hide = false;
});
if(hide)
$(this).closest('tr').hide();
// OR $(this).closest('tr).addClass('nodisplay');
});
Hide table, if table have no rows using jquery
$('.tblClass').each(function(){
if($(this).find('.rows').length == 0){
$(this).hide();
}
});

Checkbox click script - [SHIFT] check/uncheck range, [CTRL] check/uncheck all -- based on select name?

Would anyone know of a ready-made script or plugin providing:
-Shift click for check/uncheck all in range
-CTRL click to select or unselect all
That can works off the check inputs 'name' (instead of all on a page or all inside a div):
input[name='user_group[]']
input[name='record_group[]']
I've been using a couple of scripts (javascript and jQuery) but they're based on all checkboxes in a div or table and I'm not smart enough to roll my own or modify another script. Google searching on this has been a little difficult (too many common terms I think)...
Thanks Much Appreciated!
I started playing around with this script, although it's missing a CTRL+Click feature (select all/none control).
In it's original form it works against all checkboxes on a page. I changed the "$('input[type=checkbox]').shiftClick();" linke to "$("input[name='selected_employees[]']").shiftClick();" and as far as I can tell it seems to be working perfectly now against only the single checkbox group.
The only flaw (for my requirements) is there is not a CTRL+Click function to toggle check or un-check all checkboxes in the group.
<script type="text/javascript">
$(document).ready(function() {
// shiftclick: http://sneeu.com/projects/shiftclick/
// This will create a ShiftClick set of all the checkboxes on a page.
$(function() {
$("input[name='selected_employees[]']").shiftClick();
// $('input[type=checkbox]').shiftClick();
});
(function($) {
$.fn.shiftClick = function() {
var lastSelected;
var checkBoxes = $(this);
this.each(function() {
$(this).click(function(ev) {
if (ev.shiftKey) {
var last = checkBoxes.index(lastSelected);
var first = checkBoxes.index(this);
var start = Math.min(first, last);
var end = Math.max(first, last);
var chk = lastSelected.checked;
for (var i = start; i < end; i++) {
checkBoxes[i].checked = chk;
}
} else {
lastSelected = this;
}
})
});
};
})(jQuery);
});
</script>
I believe this should work!
Working demo on jsFiddle: http://jsfiddle.net/SXdVs/3/
var firstIndex = null;
$(":checkbox").click(function(e) {
$this = $(this);
if (e.ctrlKey) {
if ($this.is(":checked")) {
$("input[name='"+ $this.attr("name") +"']").attr("checked", "checked");
} else {
$("input[name='"+ $this.attr("name") +"']").removeAttr("checked");
}
} else if (e.shiftKey) {
$items = $("input[name='"+ $this.attr("name") +"']");
if (firstIndex == null) {
firstIndex = $items.index($this);
} else {
var currentIndex = $items.index($this);
var high = Math.max(firstIndex,currentIndex);
var low = Math.min(firstIndex,currentIndex);
if ($this.is(":checked")) {
$items.filter(":gt("+ low +"):lt("+ high +")").attr("checked", "checked");
} else {
$items.filter(":gt("+ low +"):lt("+ high +")").removeAttr("checked");
}
firstIndex = null;
}
}
});

Categories

Resources