Develop Reference

Table column styling with jquery

I have a table on my website and i am trying to style it with jquery. the code i am using works fine with normal table but if in a column two cells are merged it destroys the style. I want 1 column to be coloured and one column blank
jquery code
$( document ).ready(function() {
$('#tab-table').find("table").addClass('s-table');
$(".s-table tr td:nth-child(2n+1)").css("background-color","#d1deec");
});
link to fiddle

CSS can help you to draw colonnes background-colors if you use proper markup :
<colgroup>
<col/>
<col/>
</colgroup>
and then basicly apply :
col {background:#789 url(image.png);}
A mixed of background in col , and rgba colors in cells can give you this : http://codepen.io/gc-nomade/pen/ybDhH/
Else , if you do not have hands on markup, trick it and do it from headers cells.
You could use some tricks with box-shadow or pseudo-element from header cells and overflow on table.
Pseudo-element technic :
http://codepen.io/gc-nomade/pen/dDwmf
and box-shadow technic: http://codepen.io/gc-nomade/pen/xqALu

I'd use a loop (if the merged cells will always stay the same..
see fiddle:
http://jsfiddle.net/jFIT/k5yZ9/4/
$("table tr:not(:first)").each(function() {
if($(this).find('td').length == 7)
{
//can replace with array 2/4/6
$(this).find('td:nth-child(2)').css("background-color","#d1deec");
}
else
{
// 3/5/7
$(this).find('td:nth-child(3)').css("background-color","#d1deec");
}
//loop array
});
Update
http://jsfiddle.net/jFIT/k5yZ9/6/
Using array:
$("table tr:not(:first)").each(function () {
var arr = [];
var $this = $(this);
if ($(this).find('td').length == 7) {
arr.push(2, 4, 6);
} else {
arr.push(3, 5, 7);
}
$.each(arr, function (ind, val) {
$this.find('td:nth-child(' + val + ')').css("background-color", "#d1deec");
});
});

Using JQuery to switch selected row of table

I have a table. When a row is clicked on, it is given .active and the row is highlighted. I need to work on other ways to change the selected row other than clicking on it. For my example, I've chosen a next button.
http://jsfiddle.net/dHxKW/
I can do the logic behind what happens when it gets to the end of the table or anything else like that.
I just need help figuring out how to get the index of the TR with class active so that I can increase the index, which then I can give the next row the active class... That's all I need to do... how to get that row index.
This is some of the stuff I've tried that doesn't work...
alert( $('table tr .active').index() );
var row = $('table tr.active').first();
alert(row.index() );
alert($("table").index( $('table tr .active') ));
This is what I'm using as a reference (https://stackoverflow.com/a/469910/623952)
var index = $("table tr").index($(this));
but I can't get the selectors right...
Solution.....
it would have never worked... I wrote bad code:
$(this).children("tr").addClass("active"); (this = clicked on tr in the click function)
But new code:
http://jsfiddle.net/dHxKW
$("#table_one").on("click", "tr", function () {
$(".active").removeClass("active");
$(this).children("td").addClass("active");
// removed line: $(this).children("tr").addClass("active");
$(this).addClass("active");
});
$('#btn_next').on('click', function ()
{
// right here **********
var n = $('tr.active').next();
$(".active").removeClass("active");
n.children("td").addClass("active");
n.addClass("active");
});
** Just as a note, I am adding the class to both the tr and td's... I'm not sure if this is the best way but tr doesn't have background properties, so I just added it to both. I think this might be the reason for my confusion....

The issue is that the "active" class is not being added to the "tr" elements.
In this line you are looking for tr children of this, but this is a tr, thus no children get selected: $(this).children("tr").addClass("active");
Instead try $(this).addClass("active");

var counter = 0;
var index = -1
$('table tr').each(function(){
if( ! $(this).hasClass('active')) {
counter++;
}
else index = counter;
})

$('td.active').parent().index('tr')
will get you the index.
jsFiddle example
jsFiddle example 2
BTW, the link in your click function $(this).children("tr").addClass("active"); would seem to do nothing as it searches for a child row of a row.

$('table tr .active').removeClass('active').parent().next().children('td').addClass('active');
this should do it

How to delete the last column of an html table with varying columns

I have a tabulated list of records - an HTML table.
Most rows have 3 columns but some may have just 1 or 2. In this case, I use colspan and stretch it across the other columns.
What I want to do:
When a user clicks a button on the page, I want to remove the last column (collapse), ONLY if it has more than one column.
How is this possible with jquery (if it can be done)?

try something like this
$('tr').each(function(){
$("td:last").hide()
})

You can do this, but you should also add a class to the table so that you can select the table you want by class.
if($('tr').length > 1) {
$('tr').each(function(){
$("td:last").hide()
})
}
If you add for example the class myTable, do:
if($('.myTable tr').length > 1) {
$('.myTable tr').each(function(){
$(".myTable tr td:last").hide()
})
}

try this
$('tr').each(function(){
$("td:last").hide();
})

I think you need to live the save number of columns (colspan) in the row before removing the latest column in order to make table responsive.
Wrote a little function. Not tried in action
<button onclick="removeLatestCol()"></button>
<script>
function removeLatestCol() {
var latest_row = $("table tr:last");
var cols = $("td", latest_row);
if (cols.length == 1) {
latest_row.remove();
return;
}
var latest_col = cols.filter(":last");
latest_col.prev().attr("colspan", (latest_col.prev().attr("colspan") || 1) + (latest_col.attr("colspan") || 1));
latest_col.remove()
}
</script>

How the select the multiple Table data as per selected checkbox?

There is one data table with two rows, as per below image
When user click on 2bit it should highlight that TD in that column only. I achieved this using jQuery for one check box selection, but when multiple check box selection like 2 and 4 it should highlight both the TD.
http://jsbin.com/exazoh/edit#preview working example for single value highlight.
Code: http://jsbin.com/exazoh/2/edit

Try the following function:
jQuery(function() {
// on change of an input with a name starting with "bit-select"...
jQuery('input[name^="bit-select"]').change(function(){
var checked = this.checked,
val = this.value,
column = $(this).closest("th").index() + 1;
// for each td in the current column
jQuery("#tableData tr.data td:nth-child(" +
column + ")").each(function() {
var $td = $(this);
// does the current td match the checkbox?
if ($td.text() == val) {
if (checked)
$td.addClass("jquery-colorBG-highLight");
else
$td.removeClass("jquery-colorBG-highLight");
}
});
});
});
I had to add the value attributes to the second set of checkboxes.
Working demo: http://jsbin.com/exazoh/4/edit#preview
Or the short version, since I notice you were using .filter() originally:
jQuery(function() {
jQuery('input[name^="bit-select"]').change(function(){
var method = this.checked ? "addClass" : "removeClass",
val = this.value;
jQuery("#tableData tr.data td:nth-child("+($(this).closest("th").index()+1)+")")
.filter(function(){return $(this).text()==val;})[method]("jquery-colorBG-highLight");
});
});
Demo: http://jsbin.com/exazoh/5/edit

JQuery .addclass to table <tr> element where text is found

I am theming some report tables and do not have access to the templates.
I have this code so far which ends up adding "my-class" to every TR element in the report table. However, I only want to add the class to the table row TR where the text was found. I am thinking I need a little more code to do this. Here are a few things I have tried so far:
if ($('#report-area table tr:contains("Name")', this).length > 0) {
$("#reportArea table tr", this).addClass("my-class");
}
I have also tried:
if ($('#report-area table tr:contains("Name")', this).length > 0) {
$(this).addClass("my-class");
}
... but that did not work either.

Just use the selector with no fluff:
$('#report-area tr:contains("Name")').addClass('my-class');
http://api.jquery.com/contains-selector/

var $rows = $('#report-area table tr');
$rows.each(function(i, item) {
$this = $(item);
if ( $this.text() == 'Name' ) {
$this.addClass('yourClass');
}
});

I only want to add the class to the table row TR where the text was
found.
You can do:
$('#report-area table tr').each(function(){
if ($.trim($(this).text()).length > 0) {
$(this).addClass("my-class");
}
});

You can also use the .filter() function as well here:
$(document).ready(function () {
$('#report-area tbody tr').filter(function () {
return $.trim($(this).text()).length > 0;
}).addClass("my-class");
});
I like this because it's a little cleaner and limits the number of rows you need to iterate over.