I have a table with rows in it.
I want to highlight the different rows as I use the down or enter key. I have the keypress event working but I'm having issue with changing the current row to the original non-highlighted class.
I have figured out how to change the value of the next row, but I would need to reset the value from the row I'm coming from.
This is the code that I'm using to change the next "TR" to the highlighted class:
$(a).closest("tr").next().toggleClass("LUGridRowHighlight");
Please let me know.
Update:
I have a table with 5 rows of data.
My keypress code will eventually move up or down the table with the 5 rows
"a" represents the tablerow element
When I press the down arrow (keycode 40) I want to change the currently selected row that has class LUGridRowHighlight to just LUGridRow. Then I want to change the row below to the highlight class.
Right now all I can do is change the row below to the highlighted class. I want to also change the class of the row I'm coming from.
You can set all of the "non-highlighted" rows to the "non-highlighted" class:
$('#table_id tr').removeClass("LUGridRowHighlight");
It seems toggleClass returns a jquery object, so you should be able to do:
$(a)
.closest("tr")
.toggleClass("LUGridRowHighlight")
.next()
.toggleClass("LUGridRowHighlight");
or:
$(a)
.closest("tr")
.removeClass("LUGridRowHighlight")
.next()
.toggleClass("LUGridRowHighlight");
$(a).closest("tr").nextAll("tr").find("tr:first").toggleClass("LUGridRowHighlight");
Related
Say I want to put a button in an HTML table that gives me the value of the neighbor cell upon clicking it.
I have this sample JQuery code: console.log($(this).parent().parent().children('.name-cell').get(0).innerText);
In which $(this) is a button in a table cell, the rest of the line gets a neighbor cell with a specific class name name-cell and returns its value or text.
This one works but since I'm new to JS I don't know if it's the correct way to do it since it looks very clumsy.
Is there any other way I'm not aware of?
JQuery .siblings() is what you need
$(this).siblings('.name-cell').text();
I have a container in which there are five rows with multiple columns. When you click on a row the entire row should move downwards so the first row should become the second row. I searched for this but what I found didn't work for me, could you point me to some articles or give me an idea to help me solve this.
Yes, you can do that with jquery using click event and then get the previous or next row element and manipulating their indexes, using the index method present in jquery
use the index method to get their position and then apply +1/-1 logic for changing the index
Is it possible using Twitter Bootstrap to make part of a row, or a certain number of cells clickable, akin to this problem, but not for the whole row?
How do I make bootstrap table rows clickable?
Do you want each cell to be clickable? You could use code similar to that in the post you linked to:
$('.table td').click(function() {
// cell was clicked
});
This will make every 'td' element clickable. If you want just some cells to be clickable, give them a special class and then reference that in the call. For instance, give your clickable cells a "clickable" class and use the following:
$('.table td.clickable').click(function() {
// cell was clicked
});
Granted, this sets up a separate handler for each "td.clickable", rather than one event per row, but this can easily simulate making a portion of a row clickable.
Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/
I have multiple rows with three select elements each. There are two such rows during initialization and further rows can be added dynamically. I added change events to all these elements when each row is added such that all the other elements in a particular row change when one of the drop downs in that row is changed. There is also another select element #foo that is not a part of any row (it is displayed on top of the page) which on change should change the contents of all the select elements on all rows.
I tried doing this by adding jQuery("#foo select").change(callback_function) while adding the change events for each row. But when I do this, changing #foo updates only the last inserted row and not the other rows. How do I make it work in such a way that changing #foo updates all rows?
Any solutions will be greatly appreciated.
It would be easier to answer if you provided some source code, but from what I understand (When the select element with an id of foo is changed, the other select elements are changed by a certain function) this might work for you:
$("#foo").on('change', function() {
$('select.other-selects').each( function (i) {
callback_function();
});
});
Where .other-selects is the class you designete you others select elements with.