2017-05-22 6 views
0

最初の行をハイライト表示されない:これは動作しませんいくつかの理由について表の行を強調表示し、クリックされたとき - 私はこのHTMLを持って

$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"; 
} 

<!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&nbsp; <span class='fa fa-caret-down'></span> <span class='fa fa-caret-up'></span></th> 
        <th class='center_text sorttable' width='25%'>Episode&nbsp; <span class='fa fa-caret-down'></span> <span class='fa fa-caret-up'></span></th> 
        <th class='center_text sorttable'>Date Aired&nbsp; <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> 

これは、行をhightlightする呼び出される関数であります最初の行が2行目以降であれば動作します。私はここでどこが間違っているのか分かりません。

+0

するvar line_no =指数、 "セル" オブジェクトは0インデックス付けされ覚えています。 +1 – Gerard

答えて

0

最初のインデックスの値は何ですか?

最初の "TR" 要素はTRされるので、[0]

+0

を削除する必要がありますようにインデックスは0ですが、+1を削除すると、最初の行ではなく表の見出しがハイライト表示されます。 –

0

チェック更新されたコード

$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"; 
} 
+0

これは同じことをやっていて、最初の行を強調表示していません。しかし、今ではヘッダー行を強調表示していません... –

関連する問題