<!DOCTYPE HTML>
<
html
lang
=
'en'
>
<
head
>
<
meta
charset
=
'utf-8'
>
<
title
>JQuery Examples</
title
>
<
style
>
.tbl {
border: 1px solid black;
border-collapse: collapse;
}
</
style
>
<
script
src
=
</
script
>
<
script
>
$(() => {
// Adding class tbl in table
$("table").addClass("tbl");
$("table th").addClass("tbl");
$("table td").addClass("tbl");
// Setting the table head background and border
$("#button1").click(function () {
$("table thead").css("background", "gray");
$("table thead").css("color", "white");
});
// Setting the head partition line in white color
$("#button2").click(function () {
$("table th:nth-child(2)")
.css("border-right", "1px solid white");
$("table th:nth-child(1)")
.css("border-right", "1px solid white");
});
// Setting alternative background color (on even position)
$("#button3").click(function () {
$("table tbody tr").filter(":even")
.css("background", "lightgray");
});
// Text of column containing '2756' will get blue color
$("#button3").click(function () {
$("table tbody td:contains('2756')")
.css("color", "blue");
});
// Text of next column containing 'Sam' will get blue color
$("#button4").click(function () {
$("table tbody td:contains('Sam')")
.next().css("color", "brown");
});
// Text of all column next to the block containing
// '6.' will get yellow color
$("#button5").click(function () {
$("table tbody td:contains('6.')")
.nextAll().css("color", "yellow");
});
// Text of row which containing '8.' will get pink color
$("#button6").click(function () {
$("table tbody td:contains('8.')")
.nextAll().addBack().css("color", "pink");
})
// Text of row which containing '8.' will get bold
$("#button7").click(function () {
$("table tbody td:contains('Son')")
.parent().css("font-weight", "bold");
});
// Child element of column containing '2756' will get bold
$("#button8").click(function () {
$("table tbody td:contains('2756')")
.children().css("font-weight", "bold");
});
});
</
script
>
</
head
>
<
body
>
<
input
type
=
"button"
id
=
"button1"
value
=
'button1'
/>
setting the table head background and border
<
br
>
<
input
type
=
"button"
id
=
"button2"
value
=
'button2'
/>
setting the head partition line in white color
<
br
>
<
input
type
=
"button"
id
=
"button3"
value
=
'button3'
/>
text of column containing '2756' will get blue color
<
br
>
<
input
type
=
"button"
id
=
"button4"
value
=
'button4'
/>
text of next column containing 'Sam' will get blue color
<
br
>
<
input
type
=
"button"
id
=
"button5"
value
=
'button5'
/>
text of all column next to the block containing '6.'
will get yellow color
<
br
>
<
input
type
=
"button"
id
=
"button6"
value
=
'button6'
/>
text of row which containing '8.' will get pink color
<
br
>
<
input
type
=
"button"
id
=
"button7"
value
=
'button7'
/>
text of row which containing '8.' will get bold
<
br
>
<
input
type
=
"button"
id
=
"button8"
value
=
'button8'
/>
child element of column containing '2756' will get bold
<
br
><
br
><
br
>
<
h1
>GFG rating table</
h1
>
<
table
>
<
thead
>
<
tr
>
<
th
>S.No.</
th
>
<
th
>Name</
th
>
<
th
>GFG rating</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>1.</
td
>
<
td
>Jhon</
td
>
<
td
>2152</
td
>
</
tr
>
<
tr
>
<
td
>2.</
td
>
<
td
>Sam</
td
>
<
td
>1235</
td
>
</
tr
>
<
tr
>
<
td
>3.</
td
>
<
td
>Tom</
td
>
<
td
>960</
td
>
</
tr
>
<
tr
>
<
td
>4.</
td
>
<
td
>Roy</
td
>
<
td
>2756<
span
>(leader)</
span
> </
td
>
</
tr
>
<
tr
>
<
td
>5.</
td
>
<
td
>Bob</
td
>
<
td
>1456</
td
>
</
tr
>
<
tr
>
<
td
>6.</
td
>
<
td
>Simmy</
td
>
<
td
>352</
td
>
</
tr
>
<
tr
>
<
td
>7.</
td
>
<
td
>Son</
td
>
<
td
>965</
td
>
</
tr
>
<
tr
>
<
td
>8.</
td
>
<
td
>Ron</
td
>
<
td
>1745</
td
>
</
tr
>
</
tbody
>
</
table
>
</
body
>
</
html
>