How Can I Apply Some Jquery Stuff Only Based On Header Row
Solution 1:
You can get the index of the header using .index() then apply the class using the :nth-child selector.
var resultHeaderIndex = $('th:contains("result")').index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')
If you wanted to add the class to the header also then you can simply add it before you get the index:
var resultHeaderIndex = $('th:contains("result")')
.addClass('red')
.index();
$('td:nth-child(' + (resultHeaderIndex + 1) + ')').addClass('red')
Solution 2:
I think using jQuery .index() and .eq() you could do this pretty easily:
(function($){
$.fn.colorColumn = function(headerText, color){
var index = this.find("th").filter(function(){
return ($(this).text() == headerText);
}).css("backgroundColor", color).index();
this.find("tr").each(function(){
$(this).children().eq(index).css({backgroundColor: color});
})
}
})(jQuery);
$("table").colorColumn("number", "red");
working demo: http://jsfiddle.net/pitaj/eG5KE/
Solution 3:
The way I would do it is use a conditional and jQuery each:
$("th").each(function() {
if ($(this).text() === "result") { $(this).addClass('red') }
}
| id | name | number | result | Has A Class, Add Class To Table Cell |
Let's say I have the following html: …
WebRTC Video Constraints Not Working
I'm trying to get a lower resolution from the webcam na…
HasClass Doesn't Work In My Js Code?
I want to use hasClass in the following code, but that does…
I am relatively new to Javascript/Ajax. When the user click…
Highcharts Donutchart: Avoid Showing Duplicate Legend With Nested Charts
I am trying to represent nested data using Highcharts Donut…
How Do I Use Data From Vue.js Child Component Within Parent Component?
I have a form component where I use a child component. I wa…
Logic For The Next Button For The Questionnaire?
I am beginner in AngularJS and facing some issues. I am try…
Assignment To Property Of Function Parameter (no-param-reassign)
I have this function and while I have this working nicely, …
I am making a web application using nodejs and angular cli …
How To Show Website Preloader Only Once
I added a preloader to my website and the preloader animati…
|
|---|
Post a Comment for "How Can I Apply Some Jquery Stuff Only Based On Header Row"