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
Related
As you can see under 2nd row of my table between two cells there is a space which I want to remove but I am not sure how to achieve that.
Any help or suggestion will appreciated.Thanks
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Just for fun</caption>
<tr>
<td>The following will contain masked input number </td>
<td id="output"></td>
</tr>
<tr>
<td> If it is not masked number, then something is wrong.</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<tr>
<td>The following will contain masked input number </td>
<td id="output">XXXXXXX0230</td>
</tr>
<tr>
<td colspan="2"> If it is not masked number, then something is wrong.</td>
</tr>
</table>
The white space between the text and the 'output' number is being caused by the longer text in the second row. This causes the first column of the first row stretch. You're also nesting <tr> elements which you shouldn't.
You could add a colspan="2" to the <td> in the second row.
You can use the cell spacing and cell padding attribute in html 5
And set their values to 0 or -1
The answer stated above is all good unless the text in second <td> element increases.I have found a better solution which does work in my case.
Instead of putting the value of #output in another <td> i can inline that in the previous <td> and that way the space won't be there. Here's how
Code
var str1 = "78896541230";
str1 = str1.replace(/.(?=.{4})/g, 'x');
document.getElementById('output').innerHTML = str1;
<table border="0" cellspacing="0" cellpadding="1" class="formtable">
<caption>Just for fun</caption>
<tr>
<td>The following will contain masked input number <strong id="output"></strong></td>
</tr>
<tr>
<td> If it is not masked number, then something is wrong.</td>
</tr>
</table>
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!
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/
Below is my table that is getting populated with spry dataset
Here is my dataset
var ds1 = new Spry.Data.XMLDataSet("/xml/data.xml", "rows/row");
Here is my jquery inside a method that is called on a button click
function addRow()
{
var newRow = new Array();
var nextID = ds1.getRowCount();
newRow['ds_RowID'] = nextID;
newRow['id'] = "x";
newRow['name'] = "Abhishek";
newRow['country'] = "India";
ds1.dataHash[newRow['ds_RowID']] = newRow;
ds1.data.push(newRow);
Spry.Data.updateRegion(ds1);
ds1.sort('name','descending');
ds1.setCurrentRow(newRow.ds_RowID);
$(".trEven td").css("background-color", "red");
alert($.fn.jquery);
/*$("#tableDg tbody tr:first").css({
"background-color": "red"
});*/
}
Here is my table
<div id="cdiv" style="width:100%;" spry:region="ds1">
<table id="tableDg"
style="border:#2F5882 1px solid;width:100%;" cellspacing="1" cellpadding="1">
<thead>
<tr id="trHead" style="color :#FFFFFF;background-color: #8EA4BB">
<th width="2%"><input id="chkbHead" type='checkbox' /></th>
<th width="10%" align="center" spry:sort="name"><b>Name</b></th>
<th width="22%" align="center" spry:sort="host"><b>Country</b></th>
</tr>
</thead>
<tbody spry:repeat="ds1">
<tr id="trOdd"
spry:if="({ds_RowNumber} % 2) != 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
style="color :#2F5882;background-color: #FFFFFF" class="{ds_OddRow}">
<td><input type="checkbox" id="chkbTest" class = "chkbCsm"></input></td>
<td width="10%" align="center"> {name}</td>
<td width="22%" align="center"> {country}</td>
</tr>
<tr id="trEven"
spry:if="({ds_RowNumber} % 2) == 0" onclick="ds1.setCurrentRow('{ds_RowID}');"
style="color :#2F5882;background-color: #EDF1F5;" class="{ds_EvenRow}">
<td><input type="checkbox" class = "chkbCsm"></input></td>
<td id="tdname" width="10%" align="center"> {name}</td>
<td width="22%" align="center"> {country}</td>
</tr>
</tbody>
</table>
</div>
Am I going wrong somewhere, please guide me. Thanks :)
If I remember right, <tr> is only describing structure. <td> represents visual part of the table. Or this is how some browsers renders them.
Therefore $("#trEven td").css("background-color", "red") should work. And preferrably you should use classes instead of ids in these kind of cases where there may exist multiple instances.
Works for me (jsFiddle). What problems are you experiencing?
If your use classes instead of id's, you can use something like the following:
$('.trEven').each(function() {
$(this).css({"background-color": "red"});
});
See for reference: jQuery API - .each()
You shouldn’t be using ids for odd and even rows. id values are meant to be unique within the page.
So, I’d suggest:
<tr class="trOdd"
and:
<tr class="trEven"
and then:
$(".trEven")
If you really only want the first row in the table body to get a red background (as opposed to all the even ones), then your selector should be:
$("#tableDg tbody tr:first")
I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID