javascript - jQuery scrollTo selected row in c# asp.net -
i want scroll row selected not working. have added scrollbar div outside table in html.it scroll fastly , doesn't move selected row. have used jquery version 1.8.11.its working fine in fiddle, not in asp.net c# code. don't know what's problem.i new asp.net. in advance. working fiddle not working in c# asp.net. http://jsfiddle.net/adiioo7/lavvunhj/12/
<asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <h2><%: viewbag.message %></h2> <p> learn more 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 database , 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 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>
Comments
Post a Comment