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.
Related
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 am trying to add an extra functionality on my table where users can click on any Rn. This should highlight the whole column and display some hidden content coming from the highlighted column Rn TD. The highlight works fine excepts for some small bugs (e.g. you can click the 'player name' column which shouldn't be the case), but the content that needs to change such as the player names and the race information is not changing..
Also, the prev and next buttons are not working anymore since I added the extra code to make the table highlight work. The working prev/next version can be found here: http://jsfiddle.net/yunowork/4UGre/
What am I doing wrong?
DEMO: http://jsfiddle.net/yunowork/4UGre/6/
Try it in the last demo:
change:
rows.children().click(function() { ...
to:
rows.children().not('.emptyrace, .race').on('click', function() { ...
//exclude the td with prev and next link
We have again some bug (like highlight the R1, R2 element text) but this could be a starting point.
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.
I am creating a table. The last row is an input field where the user can add records. What I want is an "add"-button next to that row which the user clicks to store the new data. Visually the button is going to be outside the table, to the right.
I don't know how to do this and need some guidance. How do I add this kind of button?
In the last cell of the last row put a <div> with position:relative and inside that div put your button with position:absolute and move the button outside the table with right: -width_of_the_button. And you would add new rows before the last row in the table, so that the button is always in the last row
You need that <div> because some browsers (Firefox) don't respect position:relative on table cells and rows.
add a blank set of tds for all the other rows and in the last row you have the add button. How does that sound?
You could put the table inside the first column of another two column table, then add the button to the second column and align it vertically to the bottom.
Here's a jsfiddle for the table method - http://jsfiddle.net/ipr101/zFEQT/1/
This question deals with lining up buttons to table rows via css -
Aligning buttons with a row in a table using css
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");