I have this HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class='panel-heading'>
TV Schedules
</div>
<div class='panel-body'>
<table class='table table-striped table-inverse font_styling table-hover' id='tv_schedule_table'>
<thead>
<tr>
<th class='center_text sorttable' width='25%'>Show Name <span class='fa fa-caret-down'></span> <span class='fa fa-caret-up'></span></th>
<th class='center_text sorttable' width='25%'>Episode <span class='fa fa-caret-down'></span> <span class='fa fa-caret-up'></span></th>
<th class='center_text sorttable'>Date Aired <span class='fa fa-caret-down'></span> <span class='fa fa-caret-up'></span></th>
<th width='10%'></th>
</tr>
</thead>
<tbody>
<tr id='tv_schedule_row'>
<td class='center_text cell_width' width='25%'>{{tv_show.show_name}}</td>
<td class='center_text clickable_cell' width='25%'>{{tv_show.season_episode}}</td>
<td class='center_text clickable_cell' width='20%'>{{tv_show.date_aired}}</td>
<td class='center_text w3-large' width='15%'><i class='fa fa-check icon-styling' style='margin-left:5px; margin-right:5px;'></i> <i class='fa fa-trash icon-styling' style='margin-left:5px; margin-right:5px;'></i> <i class='fa fa-search icon-styling' style='margin-left:5px; margin-right:5px;'></i> <i class='fa fa-plus icon-styling' style='margin-left:5px; margin-right:5px;'></i></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This is the function called to hightlight row:
$scope.alter_show = function(show, index)
{
$scope.editing_show = true;
var line_no = index+1;
var table = document.getElementById("tv_schedule_table");
var cells = table.getElementsByTagName("tr");
cells[line_no].className = "hover_click_cell selected_click_cell";
}
For some reason this doesn't work for the first row but from row 2 onwards, it works. I'm not too sure where I am going wrong here.
What is the value of index at the start?
Remember the "cells" object will be 0 indexed, so the first "tr" element would be tr[0]
Check updated code
$scope.alter_show = function(show, index)
{
$scope.editing_show = true;
var line_no = index;
var table = document.getElementById("tv_schedule_table");
var cells = table.tBodies[0].getElementsByTagName("tr");
cells[line_no].className = "hover_click_cell selected_click_cell";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.