XForms/突出显示选中行
< XForms
在很多情况下，突出显示选中行非常有用。这可以通过在样式表中使用 xform-repeat-index 伪元素来实现。
通过将以下代码添加到您的 CSS 中，选中的行将以蓝色突出显示
.xforms-repeat-index {
background-color: blue;
}
此示例突出显示选中行的背景。 
此示例使用 FormFaces 系统运行。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>XForms Delete Example</title>
<!-- I used the formfaces system to test this -->
<script type="text/javascript" src="formfaces.js"></script>
<style type="text/css">
* {
font-family: Ariel, Helvetica, sans-serif;
}
label, legend {
font-weight: bold;
}
.header {
color: white;
background-color: gray;
font-weight: bold;
padding: 2px;
}
.header {
width: 370px;
}
.leftColumn, .rightColumn {
display: inline;
}
.leftColumn {
margin-left: 10px;
}
.rightColumn {
position: absolute;
left: 0;
margin-left: 150px;
}
fieldset {
width: 380px;
}
.xforms-repeat-index {
background-color: blue;
}
</style>
<xf:model>
<xf:instance>
<PhoneList xmlns="">
<Person>
<Name>Peggy</Name>
<Phone>123</Phone>
</Person>
<Person>
<Name>Dan</Name>
<Phone>456</Phone>
</Person>
<Person>
<Name>John</Name>
<Phone>789</Phone>
</Person>
<Person>
<Name>Sue</Name>
<Phone>234</Phone>
</Person>
<NewPerson>
<Name />
<Phone />
</NewPerson>
<SelectedRow />
</PhoneList>
</xf:instance>
</xf:model>
</head>
<body>
<xf:group nodeset="/PhoneList">
<fieldset>
<legend>Company Phone List</legend>
<div class="header">
<div class="leftColumn">Name</div>
<div class="rightColumn">Phone</div>
</div>
<xf:repeat id="list" nodeset="Person">
<xf:input ref="Name" class="leftColumn"><xf:label></xf:label></xf:input>
<xf:input ref="Phone" class="rightColumn"><xf:label></xf:label></xf:input>
</xf:repeat>
</fieldset>
<fieldset>
<legend>Add New Person</legend>
<xf:input ref="NewPerson/Name">
<xf:label>Name:</xf:label>
</xf:input>
<br />
<xf:input ref="NewPerson/Phone">
<xf:label>Phone:</xf:label>
</xf:input>
<xf:trigger>
<xf:label>Insert After Selected Row</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert nodeset="Person" at="index('list')" position="after" />
<xf:setvalue ref="Person[index('list')]/Name" value="/PhoneList/NewPerson/Name" />
<xf:setvalue ref="Person[index('list')]/Phone" value="/PhoneList/NewPerson/Phone" />
<xf:setvalue ref="SelectedRow" value="index('list')" />
</xf:action>
</xf:trigger>
</fieldset>
<xf:trigger>
<xf:label>Delete Selected Row</xf:label>
<xf:action ev:event="DOMActivate">
<xf:delete nodeset="Person" at="index('list')" />
</xf:action>
</xf:trigger>
<xf:output ref="SelectedRow">
<xf:label>Selected Row= </xf:label>
</xf:output>
</xf:group>
</body>
</html>
请注意，这仅在您选择一行并在输入字段上单击光标时才有效。结果是选中列表的索引值将更改。这可以被用于添加或删除选中行的函数。
截至 0.6 版本，这似乎在 FireFox 扩展程序中不起作用。