{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《Automatically scroll to Element in HTML》','https://www.manongdao.com/q-963797.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a XML containing loads of Test data. I use XSLT to present this data in HTML in a Browser. Each Test has a table containing the Teststeps. Every time a test is run the table updates the data in the table if passed or not. Then the browser reloads the page. I would like it to always jump to the table it is working on at the moment. How can I achieve this? My XSLT File:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<script type="text/javascript">
var testnum = 0;
if(document.cookie.indexOf('testnum=') !== -1) {
testnum = document.cookie.split('testnum=')[1].split(';')[0];
document.cookie = 'testnum=' + testnum + 1 + ';expires=Sat, 14 May 2015 18:00:00 GMT";';
} else {
document.cookie = 'testnum=1;expires=Sat, 14 May 2015 18:00:00 GMT";';
}
var w = $(window);
var row = $('#test').find('tr').eq( testnum );
if (row.length){
w.scrollTop( row.offset().top - (w.height()/2) );
}
</script>
<title>HMI Automotive Testing</title>
<link rel="stylesheet" type="text/css" href="report.css" />
</head>
<body>
<center>
<h1>HMI Automotive Testing</h1>
<br></br>
<div style="height:650px;width:824px;border:1px solid;overflow:auto;">
<table border="1" id ="test">
<xsl:for-each select= "TestSuite/TestCase">
<tr>
<b><xsl:value-of select="@name"/></b>
</tr>
<xsl:for-each select="Verification|Command">
<tr>
<xsl:choose>
<xsl:when test="contains(name() , 'Verification')">
<td>Verification <xsl:value-of select="@type"/></td>
<td><xsl:value-of select="@status"/></td>
</xsl:when>
<xsl:when test="contains(name() , 'Command')">
<td>Command <xsl:value-of select="@type"/></td>
<td><xsl:value-of select="@status"/></td>
</xsl:when>
</xsl:choose>
</tr>
</xsl:for-each>
</xsl:for-each>
</table>
</div>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Use
idattribute.Then if you redirect page to
your_page.html#result1browser will scroll to this table.You need to introduce some state, so that the browser can know which test it's the currently on. You can do this in several different ways:
URL
If you can add a parameter to the URL each time a test is run, then you should do what @psur said.
Cookies
Use a Cookie to store the current test number.
While the XSLT is outputting the HTML page, have it output some js at the top too. This needs to check for the existence of a cookie, and increment it's value each time the page is loaded, then scroll to that position in the HTML. Something like this:
I've given the cookies a one year expiry because I don't know what you're doing about sessions, browser restarts, etc... By default cookies last for the session, so you might be able to get away with that.
In addition to one of those things, you also need to do what @psur said, i.e. add an id to each table so that the browser can scroll to it. I would suggest just using the number: