跳過使用jQuery TR選擇上的keydown

$(function() { 
 
    var row = $('.DataList tbody tr.highlight'); 
 
    var index = row.index(); 
 
    console.log('current row: ' + index); 
 

 
    function highlight(tableIndex) { 
 
    $('.DataList tbody tr').removeClass('highlight'); 
 
    $('.DataList tbody tr:eq(' + tableIndex + ')').addClass('highlight'); 
 
    } 
 

 
    $(document).keydown(function(e) { 
 
    var currentRow = $('.DataList tbody tr.highlight'); 
 

 
    switch (e.which) { 
 
     case 38: 
 
     var prevRow = currentRow.closest('.DataList tbody tr:not(.Header, .SubHeader, .Total)').prev('tr'); 
 
     highlight(prevRow.index()); 
 
     break; 
 
     case 40: 
 
     var nextRow = currentRow.closest('.DataList tbody tr:not(.Header, .SubHeader, .Total)').next('tr'); 
 
     highlight(nextRow.index()); 
 
     break; 
 
    } 
 
    }); 
 
});

.highlight { 
 
    background-color: yellow !important; 
 
} 
 
.Header, 
 
.SubHeader, 
 
.Total { 
 
    background-color: grey; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
<table id="data" class="DataList" border="1" cellspacing="1" cellpadding="1"> 
 
    <tbody> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>header2</th> 
 
     <th>header3</th> 
 
     <th>header4</th> 
 
     <th>header5</th> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="Header"> 
 
     <td>2</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="SubHeader"> 
 
     <td>3</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
     <td>4</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="Total"> 
 
     <td>6</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

我想突出顯示的行跳過灰色的人（它們由類定義並且不能被修改）。如果達到最後一個不變灰色的那個，那麼也會很好，去第一個（再次，不變灰）。

我試過使用jQuery的最接近的+ next和prev方法，但也沒有得到它。

我從來沒有使用最接近和next/prev的方法，我當然做錯了，有人可以提供任何幫助嗎？

非常感謝！

來源

2016-09-29 Dunnow

你函數'亮點（tableIndex）'總是會被傳遞值-1即調用'亮點（-1）'。 –

我會利用的nextAll和prevAll功能：

var rows = $('.DataList tbody tr'); // cache this for better performance 
 

 
function highlight(row) { 
 
    // changed to use the cached object 
 
    rows.removeClass('highlight'); 
 
    
 
    // instead of using the index, you can just pass the object in 
 
    row.addClass('highlight'); 
 
} 
 

 
$(document).keydown(function(e) { 
 
    
 
    var currentRow = rows.filter('.highlight'); // use filter to get the current highlight 
 

 
    switch (e.which) { 
 
    case 38: 
 
     e.preventDefault(); // this will stop the page moving when the arrow is pressed 
 

 
     var prevRows = currentRow.prevAll('tr').not('.Header,.SubHeader,.Total'), // use prevAll to get all preceding rows and then filter out ones with the classes, 
 
      prevRow; 
 
     
 
     if (prevRows.length) { 
 
     // test if there is a matching row and then highlight it 
 
     prevRow = prevRows.eq(0); 
 
     } else { 
 
     // no matching so start from the end 
 
     prevRow = currentRow.nextAll('tr').not('.Header,.SubHeader,.Total').last(); 
 
     } 
 
     
 
     highlight(prevRow); // no need to figure out the index. but if you want you would do rows.index(prevRow); - gets the index with regards to all rows 
 
     break; 
 

 
    case 40: 
 
     e.preventDefault(); // this will stop the page moving when the arrow is pressed 
 
     var nextRows = currentRow.nextAll('tr').not('.Header,.SubHeader,.Total'), // same as above but next 
 
      nextRow; 
 
     
 
     if (nextRows.length) { 
 
     nextRow = nextRows.eq(0); 
 
     } else { 
 
     nextRow = currentRow.prevAll('tr').not('.Header,.SubHeader,.Total').last(); 
 
     // no matching so start from the beginning 
 
     } 
 
     
 
     highlight(nextRow); 
 
     break; 
 
    } 
 
});

.highlight { 
 
    background-color: yellow !important; 
 
} 
 

 
.Header, 
 
.SubHeader, 
 
.Total { 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="data" class="DataList" border="1" cellspacing="1" cellpadding="1"> 
 
    <thead>    <!-- put header into a thead so it's not included in highlighting --> 
 
    <tr> 
 
     <th>#</th> 
 
     <th>header2</th> 
 
     <th>header3</th> 
 
     <th>header4</th> 
 
     <th>header5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="Header"> 
 
     <td>2</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="SubHeader"> 
 
     <td>3</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="highlight"> 
 
     <td>4</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>5</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    <tr class="Total"> 
 
     <td>6</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
     <td>data</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

隨着closest在你原來的答案 - 它是通過祖先（父母）橫跨兄弟姐妹

穿越而不是

來源

2016-09-29 10:06:47 Pete

是否有可能在到達最後一個可能的行時跳到第一個（可能的）行？這看起來很有前途 – Dunnow

@Dunnow請參閱編輯。當按下箭頭時，我也停止了頁面的滾動 – Pete

<3這似乎正是所期望的，非常感謝 – Dunnow

改變高光薄霧
簡單預&下一個選擇
如果沒有找到預先&下一個TR，使用第一/最後正常TR作爲下一個亮點目標

var row = $('.DataList tbody tr.highlight'); 
 
\t \t \t \t 
 
\t \t \t function highlight(tableIndex) { 
 
\t \t \t \t $('.DataList tbody tr').removeClass('highlight'); 
 
\t \t \t \t $('.DataList tbody tr:eq('+tableIndex+')').addClass('highlight'); 
 
\t \t \t } 
 

 
\t \t \t $(document).keydown(function (e) { 
 
\t \t \t \t var currentRow = $('.DataList tbody tr.highlight'); 
 
     var normalRowSelector = 'tr:not(.Header,.SubHeader,.Total,.highlight)'; 
 
     var nextHltIndex = -1; 
 
\t \t \t \t switch(e.which) { 
 
\t \t \t \t \t case 38: 
 
\t \t \t \t \t \t nextHltIndex = currentRow.prev(normalRowSelector).index(); 
 
      if(nextHltIndex == -1){ 
 
      \t nextHltIndex = $(normalRowSelector).filter(":last").index(); 
 
      } 
 
\t \t \t \t \t break; 
 
\t \t \t \t \t case 40: 
 
\t \t \t \t \t \t nextHltIndex = currentRow.next(normalRowSelector).index(); 
 
      if(nextHltIndex == -1){ 
 
      \t nextHltIndex = $(normalRowSelector).filter(":first").index(); 
 
      } 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
     highlight(nextHltIndex); 
 
\t \t \t });

.highlight { 
 
    background-color: yellow !important; 
 
} 
 
\t \t 
 
.Header, .SubHeader, .Total { 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="data" class="DataList" border="1" cellspacing="1" cellpadding="1"> 
 
\t <tbody> 
 
     <tr class="Header"> 
 
      <th>#</th> 
 
      <th>header2</th> 
 
      <th>header3</th> 
 
      <th>header4</th> 
 
      <th>header5</th> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
     <tr class="Header"> 
 
      <td>2</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
     <tr class="SubHeader"> 
 
      <td>3</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
     <tr class="highlight"> 
 
      <td>4</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
     <tr> 
 
      <td>5</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
     <tr class="Total"> 
 
      <td>6</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
      <td>data</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

jsFiddle

來源

2016-09-29 10:10:36 amow

它沒有返回到＃1行，它的工作很好，正在關閉 – Dunnow

我已更新jsfiddle。能否請你看看更新的一個

jsfiddle

我希望你想要這個功能呢？

來源

2016-09-29 10:21:21

jsfiddle

我已經更新您提供和新的方法似乎工作就好了的jsfiddle。

使用not()防止添加類highlight任何tr具有attribute的class

一件事是一個包含所有th應包括在tbody前thead部分，但我不是你的第一tr改變它爲你請做它你自己

來源

2016-09-29 10:24:43 THCoder

這是一個有效的最好到目前爲止，問題是我提供了一個簡化的表結構，我想特別避免.Header，.SubHeader，.Total這些類，但行可能還有其他類。有了這種方法，它不會工作，是否有可能得到一個不同的邏輯跳過這些pricise樣式？我還應該指出，表格不是固定的行數，可能0索引是我想要避免的類別之一 – Dunnow

我不知道你想避免這些類別，儘管你想要的只是避免灰色的。無論如何@皮特已經爲你做了，所以我想我不必編輯我的。：D – THCoder

是的，無論如何，謝謝你，你們真的很快沒想到這麼多的反饋如此之快 – Dunnow

Id是強選擇器而不是類。

試試這個

$('#data tr.highlight');

來源

2016-09-29 10:29:15

跳過使用jQuery TR選擇上的keydown

回答

相關問題