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 擴充套件程式中不起作用。