<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
How to Access tr element from
Table using JavaScript ?
</
title
>
<
style
type
=
"text/css"
>
body {
text-align: center;
}
h1 {
color: green;
}
/* Basic CSS to design table */
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* CSS command for the row to highlight */
.highlight {
background-color: #b8b8b8;
}
</
style
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Access tr element from
Table using JavaScript
</
h3
>
<
table
id
=
"table_to_highlight"
>
<
tr
>
<
th
>Name</
th
>
<
th
>Email</
th
>
<
th
>Position</
th
>
</
tr
>
<
tr
>
<
td
>Shivam Singhal</
td
>
<
td
>shivamsinghal@app.com</
td
>
<
td
>Full Stack Developer</
td
>
</
tr
>
<
tr
>
<
td
>Shashank Chugh</
td
>
<
td
>shshankchugh@app.com</
td
>
<
td
>Software Developer</
td
>
</
tr
>
<
tr
>
<
td
>Akash Kumar</
td
>
<
td
>akashkumar@app.com</
td
>
<
td
>ML Engineer</
td
>
</
tr
>
<
tr
>
<
td
>Shivam Jaiswal</
td
>
<
td
>shivamjaiswal@app.com</
td
>
<
td
>Ethical Hacker</
td
>
</
tr
>
</
table
>
<
script
type
=
"text/javascript"
>
// JavaScript Code to Highlight any
// row in the given table.
document.getElementById('table_to_highlight')
.addEventListener('click', function (item) {
// To get tr tag
// In the row where we click
var row = item.path[1];
var row_value = "";
for (var j = 0; j <
row.cells.length
; j++) {
row_value += row.cells[j].innerHTML;
row_value += " | ";
}
alert(row_value);
// Toggle the highlight
if (row.classList.contains('highlight'))
row.classList.remove('highlight');
else
row.classList.add('highlight');
});
</script>
</
body
>
</
html
>