У меня есть таблица html с полосой прокрутки (то есть переполнение установлено). Когда я просматриваю таблицу, я хотел бы получить текущую верхнюю строку в позиции (т. Е. В соответствии с пользовательским представлением таблицы).Определить верхнюю строку в таблице html
Как мне это сделать?
Может ли кто-нибудь из вас помочь мне с примером?
Это то, что могло бы помочь вам начать работу, если вы собираетесь использовать его с ванильным 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;
}
$("table:first").find("tr:first")
Это ли это первая строка в представлении таблицы ?, независимо от количества прокрутки или там, где присутствует первая строка? –
Если вы не хотите использовать 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>
ЕСТЬ какой-то макет кода. Он устанавливает верхний цвет фона строки таблицы [относительно точки зрения пользователя] на # 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>
Это логика, которую я искал. Благодарю. –