Highlighting row and column in a table - javascript

I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:
http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart
How can I highlight with limit like that?
Here is my table: https://jsfiddle.net/pkkbf9k2/

I think that's it:
https://jsfiddle.net/8odoros/pkkbf9k2/4/
$( "td" ).hover(
function() {
var myCol = $(this).index();
var $tr = $(this).closest('tr');
var myRow = $tr.index()+1;
$('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
myCol++; myRow--;
$('table tbody td:nth-child('+myCol+')').each(function (index) {
if(index<myRow) $(this).addClass( "hover" );
});
$(this).addClass('hoverBold');
}, function() {
$( '*' ).removeClass( "hover" );
$(this).removeClass('hoverBold');
}
);

Here is a similar CSS tutorial. It will give you a more better idea.
https://css-tricks.com/simple-css-row-column-highlighting/
Hope this helps you.

Here sample link for highlighting row using jquery
http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/

You can give the bgcolor to the tag which you wanted to highlight.
<td bgcolor="#FF0000">Content</td>
Or You can give class also to the tag which you want to highlight.
example
<td class="highlight">Content</td>
and give the background color to the style.css file.

Related

Change table column order and naming convention via jQuery

Is there a way to rename column labels such as instead of RequestID, it is Request Id, etc and order the table columns in such that the first row is RequestID and Request Date and the rest like etc?
Please ignore the alternating color formatting.
$("#example").on("click", "a[target='tab']", function(){
var me = $(this);
var url = me.attr("href");
var tabName = me.data("tabName");
var tabIndex = parseInt(me.data("tabIndex"), 10);
$.get(url, function(data) {
var table = $( '<table style="font-weight:bold;font-size:10pt;border-color:#ddd;" cellpadding="4" width="100%" cellspacing="0" />' ),
tr = $( '<tr/>' ),
td = $( '<td/>' ),
th = $( '<th/>' );
//alert(JSON.stringify(data));
$.each( data[ 0 ], function(key,value) {
tr.clone().html( td.clone().html( key.bold() ) )
.append( td.clone().html( value ) )
.appendTo( table );
});
$(tabName).html(table);
// Activate the tab once the page has loaded:
$("#tabs").tabs("option", "active", tabIndex);
}, 'json');
// Prevent the browser from following the link:
return false;
});
});
</script>
Thanks very much in advance for your assistance.
I have not been able to find any usable information on the web.
Your best bet would be to separate everything into logical tables or definition lists. You could mangle the table to look like the bottom result, but you're doing that on the fly, and is going to be pretty bespoke (and brittle) code.
I'm not sure if you have control over the rendering of the table (but it seems you do since you're using json data), but that would be where I would start looking. Failing that, you could break up sections with tr elements containing empty td elements, and add a class to the td to make them appear to be empty spaces. That's gross though, and isn't even remotely semantic.

Highlight table rows on hover containing same info with JS or jQ

My boss told me to build a table with rows that highlight and if -for example- the text or number is the same as the text or number on another row's column-two, that will also highlight.
I know I can give each row a class value and make any object with the same class highlight but my boss requires it to highlight depending on the text or number of a certain column.
This is my jsFIDDLE example.
If you look at column-two of each row, you'll see that the value for row-one and three are the same, so if I was to hover over row-three, it should along with row-one highlight and vise versa.
<table>
<tr>
<td>01/12/13</td>
<td>1234567</td>
<td>Lorem</td>
</tr>
<tr>
<td>02/12/13</td>
<td>7654321</td>
<td>Ipsum</td>
</tr>
<tr>
<td>02/01/14</td>
<td>1234567</td>
<td>Dolor</td>
</tr>
</table>
How can I write a script which allows this to happen without using classes?
// Mouse over event handler
$('table').on('mouseover', 'td', function() {
// Store the hovered cell's text in a variable
var textToMatch = $(this).text();
// Loop through every `td` element
$('td').each(function() {
// Pull selected `td` element's text
var text = $(this).text();
// Compare this with initial text and add matching class if it matches
if (textToMatch === text)
$(this).parent().addClass('matching');
});
});
// Mouse out event handler
// This simply removes the matching styling
$('table').on('mouseout', 'td', function() {
$('.matching').removeClass('matching');
});
JSFiddle demo.
Note that I've modified your CSS slightly to add:
tr:hover, tr.hover, tr.matching {
background: #E5E5E5;
}
Fiddle : http://jsfiddle.net/JLubs/4/
JS :
$(document).ready(function(){
$('table tr td:nth-child(2)').each(function(){
$index = $(this).parent().index() ;
var atext = $(this).html();
$('table tr td:nth-child(2):contains('+atext+')').not(this).parent().attr('match', $index );
});
$('[match]').on('mouseover', function(){
$matchInde = $(this).attr('match');
//alert($matchInde);
$('table tr:eq('+parseInt($matchInde)+')').addClass('highlight');
}).on('mouseout', function(){
$matchInde = $(this).attr('match');
$('table tr:eq('+parseInt($matchInde)+')').removeClass('highlight');
});
});

Datatable move rows button

I have a two datatables and have this function to move rows from one to the other, it works perfectly as is, but I want to trigger the action not by clicking the row but by clicking a button, tried changing it but won't work.
...
stockTable.on('click', 'tr' ,function() { //'#toggle' selector instead 'tr'
var $row = $(this); // $(this).closest('tr'); instead $(this);
var addRow = stockTable.fnGetData(this); //$(this).closest('tr'); instead
catalogTable.fnAddData(addRow);
stockTable.fnDeleteRow($row.index());
});
...
<td><button class="toggle">C</button></td>
....
Sorry if the question may seem dumb but I'm ne to javascript.
Thanks in advance.
Replace tr with .toggle and it should work. You were trying with the ID # selector, you need a class . selector.
stockTable.on('click', '.toggle' ,function() {
You then have to re-assign this to the closest tr:
var $row = $(this).closest("tr");

DataTables table plugin for jquery: how to set a css class for tr and td

I am trying to set a css class to a row using the DataTables, query plugin for tables.
I managed to set the class on the tr tag when the initialization was complete with:
"fnInitComplete": function(oSettings) {
for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
oSettings.aoData[i].nTr.className = "myClass";
}
},
I want to set a callback for each new row, and set to tr class a and to td class b
I know how to add a class, and i need to set a class!
"fnRowCallback": function(nRow, aaData, iDisplayIndex) {
console.log(aaData);
$('tr', nRow).addClass('a');
$('td:eq(0)', nRow).addClass('b');
$('td:eq(1)', nRow).addClass('b');
$('td:eq(2)', nRow).addClass('b');
$('td:eq(3)', nRow).addClass('b');
return nRow;
},
this is what troubles me:
$('tr', nRow).addClass('a');
I don't know how to set a class to a tr tag.
According to the docs (fnRowCallback) the nRow represents a TR element
so this should do:
$(nRow).addClass('a');
If you want to add class to certain row N# you can use this(just build a proper selector):
$("tr:eq(" + rowNumber+ ")").addClass('a');
the string should look like this "tr:eq(1)"
If my understanding is correct then your issue might be in this line:
$('tr', nRow).addClass('a');
Because it equates to writing:
$(nRow).find('tr').addClass('a');
And you shouldn't be able to find a TR inside another TR (unless of course you are working with nested tables but we won't get into that)
If this is the case then your fix would be:
$(nRow).addClass('a');
Good Luck!

jQuery ui selectable table to select/deselect checkboxes

I am trying to build a table grid which represents hourly blocks for each day of the week. What I would like to then do is make each cell in the table selectable, and to check a check box if that cell is selected, or if multiple cells are selected then tick all the check boxes that each cell corresponds to. I have put together a simplified version here: http://jsfiddle.net/yxAjx/4/.
I've really got as far as putting in the selectable code -
$(function() {
$( "#selectable" ).selectable({
filter: ".block"
})
});
For example if I clicked and dragged across the first 2 cells in the 'Tue' row I would want the corresponding check boxes to be checked.
The table that contains the check boxes I have no control over as this section of html is generated from the software I am using but I have replicated the lay out of it in my example.
My Javascript and jQuery knowledge is limited so would appreciate any pointers on how to achieve this.
How about doing something like this:
$(function() {
$( "#selectable" ).selectable({
filter: ".block",
selected: function( event, ui ) {
var row = $(ui.selected).parents('tr').index(),
col = $(ui.selected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').addClass('checked').prop('checked', true);
$('#checks input:not(.checked)').prop('checked', false);
},
unselected: function( event, ui ) {
var row = $(ui.unselected).parents('tr').index(),
col = $(ui.unselected).parents('td').index();
$('#checks').find('tr').eq(row)
.children('td').eq(col)
.children('input').removeClass('checked').prop('checked', false);
}
});
$('#checks input').click(function(){
var row = $(this).parents('tr').index(),
col = $(this).parents('td').index();
if($(this).prop('checked')){
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').addClass('ui-selected');
}else{
$('#selectable').find('tr').eq(row)
.children('td').eq(col)
.children('div').removeClass('ui-selected');
}
});
});
DEMO: http://jsfiddle.net/dirtyd77/yxAjx/9/

Categories