I have an HTML table (that gets its data from a database, but thats besides the point) that has a checkbox for each row. Is ther an easy way to allow the user to check the checkbox by clicking anywhere in the row, rather than the checkbox itself? I know this can be done using javascript, but is there an easy way to do it in rails? Anyone know of any gems or tutorials online?
Here's a working jsfiddle example: http://jsfiddle.net/3XZvV/2/
It uses the first checkbox in each table row. Put them in any <td>. You can show the checkboxes, but you'll need to modify it to allow them to be clicked -- this design doesn't accommodate for clickable checkboxes since it fires the event when anything in that table row is clicked. (It was good enough for this question, but we're open to improvements.)
Here's the JavaScript to accomplish this:
$('.clickable tr').click(function() {
var c = $(this).find(':checkbox').filter(':first');
c.attr('checked', !c.attr('checked'));
$(this).toggleClass('selected');
});
Just put class="clickable" on your table. In order to make it obvious that you can interact with rows, some CSS is nice. See the fiddle.
You'd have to use JavaScript. It's actually no that hard. Just add a click event for each TR that toggles the checked="checked" state of the checkbox, and changes the background color of the TR as well to show that it has been selected.
As a further enhancement, you could remove the checkbox altogether and use a hidden field instead, to save visual space. Just be sure your users are aware that the table rows are selectable.
Related
Situation
I have a grid with a lot of information. At the beginning of every new line there's a checkbox.
Aim
Click on a checkbox and it will be checked. Click on the same checkbox again and it will still be clicked, however the icon is different. Once you click a third time onto the box it will go into unchecked.
Problem
I am able to do get the checkbox checked and unchecked, however I don't know how to only change the icon after my checkbox is already checked.
Let's take this as an example.
In the example only input type="checkbox" is used and not the whole grid. It would be an overkill for the question.
How would I go from unckecked (green background) -> checked 1 (red) and then -> checked 2 (random color)?
I might imagine this to be a simple and noobish task, but I'm kinda struggling with it.
You can use the :indeterminate CSS pseudo-class selector to style your checkbox while it was in indeterminate state as you asked.
Reference Link: https://tympanus.net/codrops/css_reference/indeterminate/
First, you have to create a custom checkbox, refer to the following page
How to create custom checkbox
Then, add your custom js to that custom checkbox. Hope this help
Is there a way of disabling the column sorting in datatables when clicking on the column header and only allow sorting with the sorting icons (check the red arrow in the picture below)?
My reason for wanting to disable the sorting is that I am using the headers for column filtering and when you click on the header to enter a string the table sorts by that column (I know it's ugly, but I will change the input box design later).
I checked their options and could not find anything. I also checked the source code but that was way way way way beyond my knowledge level.
Thanks for any help/suggestion!
/Patrik
SOLUTION
Add click event handler for each input in the header and stop event propagation to the DataTables plug-in.
$('.filter').on('click', function(e){
e.stopPropagation();
});
DEMO
See this jsFiddle for code and demonstration.
I have list of files - and after clicking on one of them it shows the jquery form: here it is: http://jsfiddle.net/GSC3x/11/
But now I noticed, that I will need a table on this page, and I want to this list be one column in my whole table, here is the (ugly) example: http://jsfiddle.net/GSC3x/15/ .
I want the jquery form thing work the same way after changing into the table view. I mean, hide everything and make form appear.
How to do it?
Thanks!
To make the table disappear, you shouldn't hide the individual cells (as you do with $(".show_hide").hide();), but hide the whole table instead.
Also, you are reusing the button that is showing the form for hiding it, but with a completely different styling. That is weird, unnecessary and makes it difficult to use.
Use a separate button to close the form, and don't use the same event handler ($('.show_hide').click). The show and hide parts share no code anyway.
Structuring your code like this also makes it very easy to add smooth transitions like fading or, the sliding you already had implemented.
I saw this post:
How can I highlight certain options in a HTML select using jQuery
which is similar to what I need to do, except a bit too complicated for my understanding. In the html body, I have a dynamically changing select form. The user can select multiple items from this form, and click a button ("Display") to run a javascript function. This function already goes through the list to determine which ones have been selected and uses the information somewhere else.
I would like it so that when the user clicks "Display", the items that were selected will be highlighted (and each with a specific color).
What do you think?
Yes! I figured it out.
myList.options[i].style.backgroundColor='yellow';
I have a large table (4000 rows, 17 columns) with which I use Sorttable. It's somewhat usable in Chrome (not so much in IE). I'd like to add some checkboxes (not on each row, just in a control panel besides the table) to show/hide groups of rows, using Javascript. I'm not (so far) using JQuery or anything other than Sorttable (which works great, by the way).
What's the best way to hide those rows? I think I need to do more than just set display: none; on the rows I want to hide, as I think this means the row would still get sorted by Sorttable. I suppose I want to remove the row from the table altogether, and keep them in some list outside the DOM? Would anybody happen to have some existing/sample code that does that?
One possibility is to save all data in JSON and then write it to an table. By this you can remove the item from the table, sort the table and add the item again if you'd like.
Don't have an example right now but check it out.
Could probebly save the table with
http://api.jquery.com/jQuery.data/
Hope it's some help