We Keep Coding

Change javascript so it works for numerous variables

I have the following code below... It takes a search field, and quickly searches the table for matching items, and hides all the other results. Right now this code works for a single search field (with class .search), and a single table (with id #SearchableTbl).
$(document).ready(function(){
$('.search').on('keyup',function(){
var searchTerm = $(this).val().toLowerCase();
$('#SearchableTbl tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
I don't know javascript, so I'm not sure how to make this function work for multiple tables. So, if the first search field was .search1 (and not just .search), and the second was .search2. And, the tables being searched were #SearchableTbl1 and #SearchableTbl2 (respectively).
Can someone help me modify the code so this works with many (not just 2) tables? As I said, I don't know javascript (but I do know a little PHP), so I'm trying to do something like this (below is a mish-mash of PHP and Javascript, which definitely wont work, but should get my point across) ....
$(document).ready(function(){
for($var=1; $var<10; $var++;) {
$('.search($var)').on('keyup',function(){
var searchTerm = $(this).val().toLowerCase();
$('#SearchableTbl($var) tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
}
});
Thanks!

With jQuery it depends on your dom structure, so wrap the table and search input (or anything else for that "data table" component) in a div, then the simple fact you're inputting into a specific input you can use that to find the parent element then find() the table.
$(document).ready(function(){
$('.data-table input').on('keyup',function(){
// find the parent
var parent = $(this).closest('.data-table')
var searchTerm = $(this).val().toLowerCase();
$(parent).find('table tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
<div class="data-table">
<input type="text"/>
<table>
...
<table>
</div>

List view search filter in jquerymobile

I have a list view in html which has headers and child elements. I have implemented jquery script to filter the header and child elements, but the problem is when I search the child elements, I get that specific child element with other elements in it also. The actual result should be (suppose I search "xxx" in the searchbox, the output should be the header element and the child-xxx element only which is not happening). I get the xxx result with other child element-aaa also. Please help. I have attached the jsfiddle link "My Test Fiddle"
$("#search").keyup(function(){
var SEARCHWORD = this.value;
$("#list li").each(function(){
if($(this).
text().toUpperCase().
indexOf(SEARCHWORD.toUpperCase()) >=0)
$(this).show();
else
$(this).hide();
});
});

I've modified your fiddle to include a combination of CSS and JS to accomplish what you want. One of your complications is that you want the header to show if any of the siblings match. So you cannot hide the header based on a non-match because there may be a different sibling match.
Second is that multiple siblings could potentially match. This means you can't just show/hide siblings based on a match. If both siblings match you need to show both, and any code that hides siblings could potentially hide a previous match.
I've added CSS code to do the showing/hiding based on matches and the event that the user is searching something (so clearing the box will reshow everything). Then the JS just sets or removes the 'hit' class.
#list.searching h3, #list.searching li > p { display: none }
#list.searching li > p.hit, #list.searching li.hit h3 { display: block }
The JS
var theList = $('#list');
$("#search").keyup(function(){
var SEARCHWORD = this.value;
// remove all hits each time
theList.find('.hit').removeClass('hit');
if (SEARCHWORD) {
// if a search term make sure the list is marked
theList.addClass('searching');
} else {
// remove searching mark
theList.removeClass('searching');
}
$("#list li p").each(function() {
// case-insensitive matching
if (this.innerText.toLowerCase().indexOf(SEARCHWORD.toLowerCase()) > -1) {
$(this).addClass('hit').parent().addClass('hit');
} else {
$(this).removeClass('hit');
}
})
});
Here is the updated fiddle http://jsfiddle.net/gS4AS/4/

Try this:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list li").each(function () {
$(this).hide();
$('p:contains(' + SEARCHWORD + ')').closest('li').show();
$('p:contains(' + SEARCHWORD + ')').show().siblings('p').hide();
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
});
});
Fiddle
You have to add this condition to show back the hidden elems:
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
Updated Fiddle
As per your latest dom structure with tables and tds update to this code:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list tr").each(function () {
$(this).hide();
$('td:contains(' + SEARCHWORD + ')').closest('tr').show();
if (SEARCHWORD == "") {
$('#list').find('tr:hidden').show();
}
});
});
Updated Fiddle with table structure.

Html in jquery string

I need the best way to parse the html from the string, I have tried .html(); and it does not work. I need it on cdata variable.
$(document).ready(function () {
var anOpen = [];
var oTable = $('#table_id').dataTable();
$('#table_id tbody').on('click', 'tr', function (e) {
var nTr = this;
var i = $.inArray(nTr, anOpen);
var cdata = this.cells[1];
console.log(cdata);
if (i == -1) {
$(this).addClass('row_selected');
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr, 1), 'details');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
}
else {
$(this).removeClass('row_selected');
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});

First, you should use $(this) instead of the javascript this. Just for coherence, try using jQuery at most when you can achieve it with jQuery.
Using jQuery you could do
$myTd = $(this).find("td").get(1) ;
$myTd.text() gives your text here. See http://api.jquery.com/text/
Using javascript, you want to get the inner content of your td tag... so this.cells[1].innerHTML returns the innerHTML of your tag, which in your case is your text.

html() is the way to go if you're trying to fetch the data from an element.
$(document).ready(function(){
var html_str = $("#foo").html();
alert("Your HTML is: " + html_str);
});
See: http://jsfiddle.net/4q6AZ/
If you're looking to strip out all HTML tags, you may consider:
var html_string = '<h1>Test</h1><p>A paragraph with a link</p>';
var regex = /<(\/?)[a-zA-Z0-9][^>]*>/g;
var stripped = html_string.replace(regex, '');
$("#result").html(stripped);
See: http://jsfiddle.net/Y6q2j/5/

Jquery .text() will send you back the text and not the HTML elements. http://api.jquery.com/text/

How can I take contents of one element and add to another when they both have an id ending in the same two or three digit number?

I have this code:
$('.update-title')
.change(function () {
$(this).prop('title', $('option:selected', this).prop('title'));
});
and this HTML:
<select id="modal_TempRowKey_14" class="update-grid update-title">
...
...
</select>
<input id="modal_Title_14" class="update-grid" type="text" value="xx">
Is it possible for me to make it so that when the .update-title changes
then the value of the title is put into the input id with the matching number.
So in this case the #modal_TempRowKey_14 title would go into #modal_Title_14 value
Important
I want this to happen only if the element being changed starts with modal_TempRowKey. Is this possible to put into the change block?

Try
$('.update-title').on("change", function() {
var id = this.id.replace('modal_TempRowKey_', '');
$("#modal_Title_" + id).val( $(this).val() );
});

My suggestion, rather than trying to parse id attributes, is to make use of jQuery's data function.
Edit your HTML so that the select menu has a data-target attribute:
<select id="modal_TempRowKey_14" data-target="#modal_Title_14" class="update-grid update-title">
...
...
</select>
Then, create your event handler like so:
$('.update-title').on('change',function() {
var $this = $(this);
$($this.data('target')).val($this.val());
})
You use the data-target attribute to find the element to which you want to apply the select menu's value.
Here's a demo:
--- jsFiddle DEMO ---

$('.update-title').change(function () {
var m = this.id.match(/^modal_TempRowKey_(\d+)$/);
if (m) {
$("#modal_Title_" + m[1]).val(this.id);
}
});​
DEMO.

Others have a more elegant approach, here is my attempt:
http://jsfiddle.net/8sLCL/1/
$('.update-title')
.change(function () {
var my_text = $(this).find(":selected").text();
var my_id = $(this).attr("id");
var my_num_pos = my_id.lastIndexOf("_");
var my_num = my_id.substr(my_num_pos + 1 ,my_id.length - my_num_pos );
$( "#modal_Title_" + my_num ).val(my_text );
});​

How to build a simple table filter with jQuery?

How can I build a simple table filter with good effect using jQuery? I don't mind about pagination.
list -> select data of database.
I do not want to use a plugin, I prefer the use of short code.
Example:

$('#inputFilter').keyup(function() {
var that = this;
$.each($('tr'),
function(i, val) {
if ($(val).text().indexOf($(that).val()) == -1) {
$('tr').eq(i).hide();
} else {
$('tr').eq(i).show();
}
});
});
CHECH THIS

I don't normally help out with this, but I got bored this morning..
http://jsfiddle.net/hHJxP/

I know it's kinda late but hope this code helps.
<script>
$(document).ready(function(){
$("#yourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#yourTableId tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

Try testing the innerHTML of the row to the value of the input field, showing / hiding the content depending on the test-result.
$('#test').bind('keyup', function() {
var s = new RegExp(this.value);
$('tr').each(function() {
if(s.test(this.innerHTML)) $(this).show();
else $(this).hide();
});
});
JSFIDDLE with example table and input field.
edit
It might be better to use .text() instead of innerHTML. Performancewise innerHTML would be better, but .text() doesn't accept the html-tags as valid search results. JSFIDDLE #2.