我想滚动到所选的行,但它不起作用。我已经在html中将滚动条添加到了div表外。它快速滚动并且不会随选定的行移动。我使用的jquery版本是1.8.11。它在小提琴中运行良好,但在asp.net c#代码中没有。我不知道问题是什么。我是asp.net的新手。提前致谢。 工作小提琴,但它不在c#asp.net中工作。 http://jsfiddle.net/adiioo7/Lavvunhj/12/
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewBag.Message %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<div style="overflow:scroll;height:120px;width:450px;" id="your_div">
<table id="table1">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
<!--fecthed records from database and filled in rows-->
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item0</td>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<!-- //all rows likewise -->
</tbody>
</table>
</div>
<script type="text/javascript">
$tables = $('#table1'); //gets the table
limitcount = 2;
mQ = []; //my queue
timer = null;
$tr = $('tr');
// alert("button clicked");
$('#result').html(''); //demo code
// alert("00");
$tr.removeClass('selected');
// alert("11");
var t = 0,
$tbltr;
var t1 = [];
$tables.find('tr').each(function () {
mQ.push($(this));
});
// mQ.push($tbltr.get(t1[0]));
// mQ.push($tbltr.get(t1[1]));
timer = setInterval(function () {
if (mQ.length === 0) {
clearInterval(timer);
return false;
}
$tr.removeClass('selected');
$(mQ.shift()).click().addClass('selected');
}, 1000);
$(document).delegate('tr', "click", function (e) {
var _offset = $(this).offset();
var _topoffset = _offset.top;
var objDiv = document.getElementById("your_div");
_topoffset = _topoffset - $(this).height();
objDiv.scrollTop = objDiv.scrollTop + _topoffset;
});
</script>
<style>
.selected {
background-color:Red;
color:White;
}
</style>
</asp:Content>