Определить верхнюю строку в таблице html

У меня есть таблица html с полосой прокрутки (то есть переполнение установлено). Когда я просматриваю таблицу, я хотел бы получить текущую верхнюю строку в позиции (т. Е. В соответствии с пользовательским представлением таблицы).Определить верхнюю строку в таблице html

Как мне это сделать?

Может ли кто-нибудь из вас помочь мне с примером?

источник

2010-12-08 Anonymous

Это то, что могло бы помочь вам начать работу, если вы собираетесь использовать его с ванильным JavaScript. Это, безусловно, не является совершенным, но может вызвать некоторые идеи ... JSFiddle Example

[обновление] код из ссылки выше

код JavaScript

document.getElementById('btn').onclick = function() { 
    var tbl = document.getElementById('tbl'); 
    var scrollAmt = document.getElementById('asdf').scrollTop; 
    var totalRowHeight = 0, 
     viewTolerance = 1/3, //if only 1/3 of row is showing highlight next row 
     rowHeight; 

    for(var i = 0; i < tbl.rows.length; i++) { 
     totalRowHeight += rowHeight = tbl.rows[i].offsetHeight; 
     if(totalRowHeight > scrollAmt) { 
      //if row doesn't meet viewTolerance requirement highlight next row 
      var rowIndex = (totalRowHeight - scrollAmt < rowHeight*viewTolerance) ? i + 1: i; 
      tbl.rows[rowIndex].style.backgroundColor = '#ff00ff'; 
      break; 
     } 
    } 
}

HTML

<div id="asdf"> 
    <table id="tbl"> 
     <tbody> 
      <tr><td>asdf</td><td>asdf1</td></tr> 
      <tr><td>asdf</td><td>asdf2</td></tr> 
      <tr><td>asdf</td><td>asdf3</td></tr> 
      <tr><td>asdf</td><td>asdf4</td></tr> 
      <tr><td>asdf</td><td>asdf5</td></tr> 
      <tr><td>asdf</td><td>asdf6</td></tr> 
      <tr><td>asdf</td><td>asdf7</td></tr> 
      <tr><td>asdf</td><td>asdf8</td></tr> 
     </tbody> 
    </table> 
</div> 
<input type="button" value="getTop()" id="btn" />

CSS

#asdf{ 
    height:100px; 
    overflow:scroll; 
}

источник

2010-12-08 05:35:33 subhaze

Это логика, которую я искал. Благодарю. –

-2

$("table:first").find("tr:first")

источник

2010-12-08 05:15:44

Это ли это первая строка в представлении таблицы ?, независимо от количества прокрутки или там, где присутствует первая строка? –

Если вы не хотите использовать JQuery, вы можете сделать это таким образом.

<script language="javascript"> 
function DoSomethingWithTopRowOfTable { 
var myTable = document.getElementById('IdOfYourTable'); 
var tr = myTable.rows(i); 
//To access the first cell... 
var cll = tr.cells(0); 
//To get text of first cell in first row... 
var cellText = cll.innerText; 
} 
</script>

источник

2010-12-08 05:28:30 N0Alias

ЕСТЬ какой-то макет кода. Он устанавливает верхний цвет фона строки таблицы [относительно точки зрения пользователя] на # FF00FF. Не тестировали это с помощью вложенных таблиц. Это, вероятно, также заберет таблицы таблиц внутри вашей таблицы ... Итак, вы должны проверить родительский указатель своих ТР перед их тестированием.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script> 

function findScreenPosition(element) { 
    if (element.offsetParent) 
    { 
     var parentPos = findScreenPosition(element.offsetParent); 
     return [element.offsetLeft + parentPos[0], 
       element.offsetTop - element.scrollTop + parentPos[1] 
     ]; 
    }else{ 
     return [element.offsetLeft, 
       element.offsetTop - element.scrollTop 
     ]; 
    } 
} 

var lastTopElement = null; 
window.onscroll = function() 
{ 
    table = document.getElementById("table"); 
    var innerRows = table.getElementsByTagName("tr"); 

    var done = false; 
    for(var i = 0; i < innerRows.length && !done; i++) 
    { 
     if(findScreenPosition(innerRows[i])[1]+innerRows[i].offsetHeight > 0) 
     { 
      done = true; 
      innerRows[i].style.backgroundColor = "#FF00FF"; 

      if(lastTopElement != null) 
       lastTopElement.style.backgroundColor = ""; 

      lastTopElement = innerRows[i]; 
     } 
    } 
}; 
</script> 
</head> 
<body> 
<table width="500px" id="table"> 
    <tr><td>this is a row</td></tr> 
    <tr><td>this is a row</td></tr> 
    <tr><td>this is a row</td></tr> 
    <tr><td>this is a row</td></tr> 
    <tr><td>this is a row</td></tr> 
    <tr><td>this is a row</td></tr> <!-- repeat as much as you want... this works with scrolling too --> 
</table> 
</body> 
</html>

источник

2010-12-08 05:38:35 Warty

Определить верхнюю строку в таблице html

ответ

Смежные вопросы