Develop Reference

Show rows in table with cells name attribute containing string from input (JQuery)

I would like to have keyup function that would show only rows matching the input text by cell that spans on multiple rows.
Consider following table:
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1'> dummy1 </td>
</tr>
<tr>
<td name='Key1'> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2'> dummy3 </td>
</tr>
<tr>
<td name='Key2'> dummy4 </td>
</tr>
</table>
jsfiddle
Here each row has second td tag with name that matches its "parent" column text. So when I type 'Key1' at the input field I would like it to show only dummy1 and dummy2. Is it possible in jquery?

I understand that you want to display the rows that has a matching name. If this is wrong, please elaborate more, then I can update it.
Here is a demo: https://jsfiddle.net/erkaner/gugy7r1o/33/
$('input').keyup(function(){
$('tr').hide();
$("td").filter(function() {
return $(this).text().toLowerCase().indexOf(keyword) != -1; }).parent().show().next().show();
});
});

Here's my take on your issue, assuming you always want the first column to show. https://jsfiddle.net/gugy7r1o/2/
<input type="text" id="myInput" />
<table border='1'>
<tr>
<td rowspan='2'>Key1</td>
<td name='Key1' class="data"> dummy1 </td>
</tr>
<tr>
<td name='Key1' class="data"> dummy2 </td>
</tr>
<tr>
<td rowspan='2'>Key2</td>
<td name='Key2' class="data"> dummy3 </td>
</tr>
<tr>
<td name='Key2' class="data"> dummy4 </td>
</tr>
</table>
.data{
display:none;
}
var theData = $('td.data');
var input = $('#myInput').on('keyup', function(){
theData.hide();
var value = input.val();
var matches = theData.filter('[name="'+value+'"]');
matches.show();
});

Firstly, I would recommend using <ul> to wrap each key in as tables should be used for data structure (Forgive me if that is what it is being used for).
Secondly, just attach an on keyup event to the search box and then find matches based on the id. See example below:
JS Fiddle Demo
It is also worth mentioning that it could be useful attaching a timeout to the keyup event if you end up having large amounts of rows so that only one filter is fired for fast typers!

jQuery - Select current table row values

When someone clicks on the Download button in my table, I want to pass the date values from that particular row to a function. Currently I can only pass the date values from the first table row.
This is the selector I'm using:
$(this).parent().find('#period-start');
Which always returns:
[<td id=​"period-start">​5/1/2013​</td>]
I've tried combinations of the parent, child, find and closest selectors, but haven't been able to stumble across the correct one to grab the date values from the current row. Thanks.
Table
<table id="tblStatements" class="table">
<thead>
<tr>
<th>Period Starting</th>
<th>Period Ending</th>
<th>Download</th>
</tr>
</thead>
<tbody>
<tr>
<td id='period-start'>5/1/2013</td>
<td id='period-end'>5/31/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
<tr>
<td id='period-start'>4/1/2013</td>
<td id='period-end'>4/30/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
<tr>
<td id='period-start'>3/1/2013</td>
<td id='period-end'>3/31/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
</tbody>
</table>

ID's are always supposed to be unique in HTML. So, you might try out this, w/o using an ID:
// Get the first td
var periodStart = $(this).closest('tr').children('td:eq(0)').text();
// Get the second td
var periodEnd = $(this).closest('tr').children('td:eq(1)').text();
FIDDLE DEMO

Use this - don't use duplicate ID's though, use class instead
$(this).closest('tr').find('#period-start');
or -
$(this).closest('td').siblings('#period-start');

try this
$(this).parent().siblings('#period-start');
Make sure all your ids is unique..your HTML is invalid.... change it to class and try this
$(this).parent().siblings('.period-start');

You should not use more then one element with the same id use class insidead.
<tr>
<td class='period-start'>5/1/2013</td>
<td class='period-end'>5/31/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
<tr>
<td class='period-start'>4/1/2013</td>
<td class='period-end'>4/30/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
<tr>
<td class='period-start'>3/1/2013</td>
<td class='period-end'>3/31/2013</td>
<td><button type='submit'>Download</button></td>
</tr>
and use this code to select proper element
$(this).parents('tr').find('.period-start');

try this
$.trim($(this).closest('tr').find('[id="period-start"]').html());//this gives start date

split string with delimiter and put it in some label

I have a demo here
In the demo i have a table and a temp var to keep the delimited string, using js I am putting the delimited strings into appropriate places, but instead of an input box, i want some label i.e., without any boundary or box holding the value. Is there a way to do that, I am using jsp
for eg:
Configuration Name Raj

<td width="25%"><input type="text" id="cname" readonly="readonly" style="border:0"></input></td>
OR
document.getElementById("cname").innerHTML = config_details[0];
with either
<td width="25%"><label" id="cname"></label></td>
or
<td width="25%" id="cname" ></td>
PS: here are the new input types from HTML5
search
tel
url
email
datetime
date
month
week
time
datetime-local
number
range
color

There is nothing like <input type="label"></input>
So you can do something like this.
Change <td width="25%" id="cname"><input type="label"readonly="readonly"></input></td> to <td width="25%" id="cname"></td> and call it like
document.getElementById("cname").innerHTML= config_details[0];

You can put the values into any kind of element you want. Just give the id (e.g. cname) to the element you want to put the value in and then use .innerHTML instead of .value, e.g.:
<table width="100%" cellspacing="0" cellpadding="4" border="0">
<tbody>
<tr>
<th width="25%">Configuration Name</th>
<td width="25%" id="cname"></td>
<th width="25%">Host Name</th>
<td width="25%" id="chostname"></td>
</tr>
<!-- ... -->
</tbody>
</table>
And in your JavaScript:
config_details = temp.split(",");
document.getElementById("cname").innerHTML = config_details[0];
// ...
document.getElementById("chostname").innerHTML = config_details[5];
// ...

Try something like this fiddle
HTML
<table width="100%" cellspacing="0" cellpadding="4" border="0">
<tbody>
<tr>
<th width="25%">Configuration Name</th>
<td width="25%"><span id="cname"></span></td>
<th width="25%">Host Name</th>
<td id="chostname" width="25%"></td>
</tr>
</tbody>
</table>
JS
var temp = "Raj,jh,Production,2011-06-06 08:30:15.0,client1.xml,nix1,abc,Linux"
config_details = temp.split(",");
document.getElementById("cname").innerHTML = config_details[0];

jquery how to remove a column from a table

I need to click in a Close img, and remove all the column where the img is located.
I'm trying to do something like this:
var colnum = $(this).closest("td").prevAll("td").html();
$(this).closest("table").find("tr td:eq(" + colnum + ")").remove();
but, its not working.
EDIT: GUYS, SORRY FOR THE FIRST POST, I WAS KIND A HURRY TO OPEN THE QUESTION.
I EDIT EVERYTHING. TAKE A LOOK IN THE DEMO
the html demo: New Demo
if you guys see the red stuffs in the table, that I need to remove when click que "CLOSE".
Remove the column where I'm clicking.
ps.: guys, the red class was just to you guys see where need to be the close event.

In your example demo, what should actually close?... I modified it slightly and the close column disappears, but I am unsure what else you are expecting to be removed.
See here: http://jsfiddle.net/gfosco/TdCYy/24/
The issue is being inside a nested table... You want to remove the column from the cell parent tables parent table.
Updated example here:
http://jsfiddle.net/gfosco/TdCYy/37/

You should be able to use the nth-child selector to get the cells in nth column, something like this:
$(this).closest("table").find("tr td:nth-child(" + colnum + ")").remove();

Check out this link, I have edited your demo http://jsfiddle.net/TdCYy/39/
This is the HTML unchanged, except for the class first-row added to the first red row:
<table border='1' width='100%'>
<tr>
<td>Somthing 1</td>
<td>Somthing 2</td>
<td>Somthing 3</td>
<td>
<table border='1' style='border: solid red;' width='100%'>
<tr class="first-row">
<td colspan='2'>
Something
<span style='float: right' class='img_romove_columm'>Close</span>
</td>
</tr>
<tr>
<td>Another</td>
<td>Another 1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
</table>
CSS is untouched.
Javascript should be (this works):
$(".img_romove_columm").click(function(){
// Hide the first row that has the close button, and also hide the row right after it (another, another1)
$('tr.first-row, tr.first-row + tr').hide();
// Hide everything that has the red class (result, result, result, result, )
$('td.red').hide();
});
Is this what you're looking for?

Here is an example I came up with. simply apply the same class (red) to all of the elements to want to disappear, including the nested table. Then you can call
$('.red').hide();
FIDDLE http://jsfiddle.net/Jaybles/TdCYy/42/

Get the closest class from a list jquery

It's hard to explain, so I created an example:
jsfiddle
My idea is to change the color of each column when the respective input is in action...
If anyone has a better idea to do this - please let me know!
When I focus the input, I need the current class of the column.
first column input, get the class of the RED column
and the second one, get the class of the BLUE column
and so go's on...
Because if I get the class, then I can manipulate anything with this class.
the code is here:
$(".inputTest").focusin(function(){
var class = $(this).closest('.tableList')
.children().children().children('.auxClass')
.attr('class')
.split(' ')[0];
alert(class);
});
This is the main code, I try alot of stuffs to get, but nothing.
Thanks

First I'd add an outer table to split the page in a left and a right hand side. That way, the inputs below the red border and the inputs below the blue border each have their own table.
Then you can search for the first td below the closest table:
$(".inputTest").focusin(function(){
var class = $(this).closest('table').find('td:eq(0)').attr('class');
alert(class);
});
Click for working jsfiddle example.

Try this:
$(".inputTest").focus(function(){
var class = $(this).closest('table').parent().attr('class');
alert(class);
});
Edit: Oh, i just realised your inputs are not inside your tables, i think you're gonna have a hard time matching them up to the table/column they're under then. You'd need to add a common attribute to identify them by.

As mentioned in other answers your inputs are not actually in the same "columns" as your red/blue bordered tables, but you can make it so they are using the <col> element on the main table, then using the index value you can match your inputs to their column
Working Example
HTML - the only addition is the two <col> elements at the start
<table width="100%" border="1" class='tableList'>
<col span="2" class="left">
<col span="2" class="right">
<tr>
<td class="101 auxClass" width="261px" colspan="2" style="border: solid red;">
<table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
<tbody>
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td width="78px">Something 2</td>
<td>Total</td>
</tr>
</tbody>
</table>
</td>
<td class="102" width="261px" colspan="2" style="border: solid blue;">
<table border="1" cellspacing="1" cellpadding="1" width="100%" height="70px">
<tbody>
<tr>
<td colspan="2">
Something 3
</td>
</tr>
<tr>
<td width="78px">Something 4</td>
<td width="75px">Total 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
</tr>
<tr>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
<td>Result</td>
<td><input type="text" class="inputTest"/></td>
</tr>
</table>
CSS:
col.current {background: #eee;}
jQuery
$(".inputTest").focusin(function(){
var colidx = $(this).closest('td').index();
if (colidx == 1) {
$("col").removeClass('current');
$("col.left").addClass('current');
} else if (colidx == 3) {
$("col").removeClass('current');
$("col.right").addClass('current');
}
});
Your main table is actually 4 columns, and you need to split it into two halfs of two columns each with the input being in the second column of each half
The jQuery is finding the index of the parent td of the input - there are four columns in the main table so the index of a td will either be 0,1,2 or 3 - and the input is either going to be in cell index 1 or cell index 3. When it finds out which one it add a class to the relevant col element to which you can add a background highlight..
Note though that the CSS you can apply to a col element is limited, see: http://www.quirksmode.org/css/columns.html , for the options so it would depend what you want to do
however I think from this you could probably target td index 0 & 1, or td index 2 & 3 if needed