在HTML中自动滚动到元素 [英] Automatically scroll to Element in HTML
问题描述
我有一个包含大量测试数据的XML。我使用XSLT在浏览器中以HTML格式显示这些数据。每个测试都有一个包含测试步骤的表格。每次运行测试时，表格都会更新表格中的数据，如果通过或未通过。然后浏览器重新加载页面。我希望它能够一直跳到正在处理的表格中。我怎样才能做到这一点？我的XSLT档案：
<？xml version =1.0？>
< xsl：stylesheet version =1.0xmlns：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 =星期六，2015年5月14日18:00:00 GMT;';
} else {
document.cookie ='testnum = 1; expires =星期六，2015年5月14日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汽车测试< / title>
< link rel =stylesheettype =text / csshref =report.css/>
< / head>
< body>
< center>
< h1> HMI汽车测试< / h1>
< br>< / br>
< div style =height：650px; width：824px; border：1px solid; overflow：auto;>
< table border =1id =test>
< xsl：for-each select =TestSuite / TestCase>
< tr>
< b>< xsl：value-of select =@ name/>< / b>
< / tr>
< xsl：for-each select =Verification | Command>
< tr>
< td>验证< xsl：value-of select =@ type/>< / td>
< td>< xsl：value-of select =@ status/>< / td>
< / xsl：when>
< xsl：when test =contains（name（），'Command'）>
< td>命令< xsl：value-of select =@ type/>< / td>
< td>< xsl：value-of select =@ status/>< / td>
< / xsl：when>
< / tr>
< / xsl：for-each>
< / xsl：for-each>
< / table>
< / div>
< / center>
< / body>
< / html>
< / xsl：template>
< / xsl：stylesheet>
您需要引入一些状态，以便浏览器可以知道它当前正在进行哪项测试。你可以用几种不同的方式来做到这一点： 时间测试运行，那么你应该做什么@psur说。
Cookies
使用Cookie存储当前的测试编号。
当XSLT输出HTML页面时，是否也会在顶部输出一些js。这需要检查cookie是否存在，并在每次加载页面时增加它的值，然后滚动到HTML中的该位置。像这样：
< script type =text / javascript>
//<！[CDATA [
var testnum = 0;
if（document.cookie.indexOf（'testnum ='）！== -1）{
// Cookie已经存在，这不是第一次测试，请阅读testnum
testnum = document.cookie.split（'testnum ='）[1] .split（';'）[0];
//下一次将下一个testnum写回cookie。
document.cookie ='testnum ='+ testnum + 1 +'; expires =星期六，2015年5月14日18:00:00 GMT;';
} else {
//否cookie，必须先测试
document.cookie ='testnum = 1; expires =星期六，2015年5月14日18:00:00 GMT;';
}
//滚动到正确的测试表
location.hash ='＃'+ testnum;
//]]>
< / script>
我给了Cookie一年的有效期，因为我不知道您在做什么关于会话，浏览器重新启动等等......默认情况下，cookie会持续用于会话，所以你可能能够避免这种情况。
除了这些之外，也需要做@psur说的东西，即为每个表添加一个id，以便浏览器可以滚动到它。我建议只使用数字：
< table id =1>
...
< / table>
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>
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:
<script type="text/javascript">
//<![CDATA[
var testnum = 0;
if(document.cookie.indexOf('testnum=') !== -1) {
// Cookie already exists, this isn't the first test, read the testnum
testnum = document.cookie.split('testnum=')[1].split(';')[0];
// write to next testnum back to the cookie for next time.
document.cookie = 'testnum=' + testnum + 1 + ';expires=Sat, 14 May 2015 18:00:00 GMT";';
} else {
// No cookie, must be first test
document.cookie = 'testnum=1;expires=Sat, 14 May 2015 18:00:00 GMT";';
}
// scroll to the correct test table
location.hash = '#' + testnum;
//]]>
</script>
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:
<table id="1">
...
</table>
这篇关于在HTML中自动滚动到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
