I'm new to JQuery and datatables, I have a question about using textboxes in a Jquery UI datatable column. I have a column which has textboxes. When I hover over a row I want my textbox background and border to change. I have added the logic to add/remove the css class using JQuery, but it does not seem to work in a datatable.
$('tr').each(function () {
$('this').hover(function () {
$('#myText').addClass('hover');
}, function () {
$('#myText').removeClass('hover');
});
});
Here is the JSFiddle
Any ideas using JQuery?
you dont need jquery to do this just use css:
#example tr input:hover{
background-color: red;
border: 1px solid gray;
}
fiddle
if you want a jquery solution use this
table = $('#example').dataTable({
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$('td:eq(1)', nRow).hover(
function() { $(this).find("input").addClass("hover") } ,
function() { $(this).find("input").removeClass("hover") }
);
}
});
fiddle
this will effect the entire row
table = $('#example').dataTable({
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
$(nRow).hover(
function() { $(this).find("input").addClass("hover") } ,
function() { $(this).find("input").removeClass("hover") }
);
}
});
fiddle
The CSS3 is the most elegant solution but if you really wanna do it with jquery do it like this:
$('tr').each(function () {
$(this).hover(function () {
$(this).toggleClass('hover');
});
});
In this case you shouldn't set the this in ', because it hands over the scope, the class or object you're in.
Related
I want to show a table inside a td with an on click function. But it shows the tables in the complete column with the on click function .How to make it only show the table of the same td on which click function is performed?
$(document).ready(function() {
$("#checklistbox").hide();
$("#row_list").hide();
$("#checklist").click(function() {
$("#checklistbox").show();
});
$("input").click(function() {
$("#checklistbox").hide();
});
});
$(document).ready(function() {
$("#nameinitials").each(function() {
$(".table-responsive").hide();
});
});
$(document).ready(function() {
$(".val_resp").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").show();
});
});
$("input").click(function() {
$("#val_resp").each(function() {
$(".table-responsive").hide();
});
});
});
Use DOM traversal functions relative to $(this)
$(".val_resp").click(function() {
$(this).closest("td").find(".table_responsive").show();
});
I am trying to apply a new Style to my Submit-Button if its focused.So if its focused, the Style changes, but i cant get rid of it.Means that i cant lose focus on my Button.The other Problem is, that when focused the button moves like 2-3pixel down.
$(document).ready(function(){
$(".login").hover(function() {
$(this).toggleClass("hoverbutton");
});
$(".login").focus(function(){
$(this).toggleClass("focusbutton");
return false;
});
});
Hope someone can help me out with this :)
try this
$(document).ready(function () {
$(".login").hover(function () {
$(this).toggleClass("hoverbutton");
}, function () {
$(this).toggleClass("Normalbutton");
});
});
OR
$(document).ready(function () {
$(".login").hover(function () {
$(this)
.removeClass("normalbtn")
.addClass("hover_btn");
}, function() {
$(this)
.removeClass("hover_btn")
.addClass("normalbtn");
});
});
Refer Here
According to the jQuery API (http://api.jquery.com/hover/), hover accepts two functions:
$( ".login" ).hover(
function() {
// This part is called on Mouse over
$( this ).addClass( "hoverbutton" );
}, function() {
// This part is called on Mouse out
$( this ).removeClass( "hoverbutton" );
}
);
$(".login").blur(function(){
$(this).removeClass("focusbutton");
return false;
});
Added this after .focus() and works fine for me
You are looking for wrong events,
Look at jQuery API: http://api.jquery.com/blur/
I have a table that is connected to Jquery selectable, and Im trying to get it to grab the value of the selected table item and put it in a text box. I keep getting
[object object] as the table value
here is the script
<script>
$( "#drilldowntable" ).selectable(
{ filter:"td",
stop: function(){
$(".ui-selected", this).each(function(){
var index = $("#drilldowntable td").val(this);
$("#graphinfo").val(index);
}
)}
});
</script>
any ideas why this is happening?
You mean something like this? Here's a FIDDLE
$("#drilldowntable").selectable({
filter: "td",
selected: function() {
$(".ui-selected", this).each(function() {
$("#graphinfo").val($(this).text());
});
}
});
by the way to retrieve td content you must use .text() only inputs have values.
I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:
//Mouseover any row by adding class=mouseRow
$(".mouseRow tr").mouseover(function() {
$(this).addClass("ui-state-active");
});
$(".mouseRow tr").mouseout(function() {
$(this).removeClass("ui-state-active");
});
$('.mouseRow tr').click(function(event) {
$(this).toggleClass('selectRow');
});
The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?
You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').not(this).removeClass('selectRow');
$(this).toggleClass('selectRow');
});
Here's a working example.
Use this script at end of your html,meant after </body> tag
<script>
$("tr").hover(function()
{
$(this).addClass("hover");
}, function()
{
$(this).removeClass("hover");
});
$('tr').click(function(event) {
$('tr').not(this).removeClass('click');
$(this).toggleClass('click');
});
</script>
This is css that highlight your row:
.click{
background:#FF9900;
color: white
}
.hover{
background:blue;
color: white
}
here is the link of working example
Working example
Hope this will help
While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:
$(document).on('click', '.DTA', function (event) {
$('.DTA').not(this).css('backgroundColor', "#FFF");
$(this).css('backgroundColor', "#FAA");
});
Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/
$('.mouseRow tr').click(function(event) {
if (!$(this).hasClass('selectRow')){
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
} else {
$('.selectRow').removeClass('selectRow');
}
});
Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:
$('.selectRow').removeClass('selectRow');
$(this).addClass('selectRow');
Using jquery-ui .selectable function with tbody id='selectable':
$(function() {
$("#selectable").selectable({
filter: "tr", //only allows table rows to be selected
tolerance: "fit", //makes it difficult to select rows by dragging
selected : function(event, ui) {
var rowid = "#"+ui.selected.id; //gets the selected row id
//unselects previously selected row(s)
$('tr').not(rowid).removeClass('ui-selected');
}
});
});
Each of my table rows, which were created dynamically have an id of 'task'+i
You could try this:
$('.mouseRow tr').click(function(event) {
$('.mouseRow tr').each(function(index) {
$(this).removeClass('selectRow');
});
$(this).toggleClass('selectRow');
});
You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.
I can't get my pagination to work after I added a date filtering plug-in to datatables.
The original code was like this and it was picking up the pagination fine.
$(document).ready(function() {
$('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
this is my current one with the plug in variables
$(document).ready(function() {
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
Thanks in advance.
Well, in your current function, this part:
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
should be written like this:
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
Edit
In case it wasn't clear, the full jQuery code should look like this:
$(document).ready(function() {
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});