XForms, Insert and Delete into Table

Motivation

You want to insert and delete records into a table. In this example records are appended to the end of a table but any selected row can be removed. This example does "in-place" table editing. There is no separate form to enable viewing a new record other than in the actual table.

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms">;

type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");

• { font-family: Ariel, Helvetica, sans-serif }

.table-header {
display: table-row;
}

.column-header {
display: table-cell;
text-align: center;
width: 185px;
color: white;
background-color: gray;
font-weight: bold;
}

Demonstration of inserting and deleting records from a table
id="phone-list">
id="my-phone-list" src="phone-list.xml" xmlns="" />
id="update-from-local-file" method="get" action="phone-list.xml"
replace="instance" instance="my-phone-list"/>
id="view-xml-instance" method="get" action="phone-list.xml" />
id="save-to-local-file" method="put" action="phone-list.xml" />

class="table-header">
class="column-header">Name
class="column-header">Phone

ref="/PhoneList/Person" id="repeatPerson">
id="name-input" ref="Name"/>
ref="Phone"/>

Add Person
ev:event="DOMActivate">
ref="/PhoneList/Person[last()]" position="after" at="last()"/>
ref="/PhoneList/Person[last()]/Name" value="''"/>
ref="/PhoneList/Person[last()]/Phone" value="''"/>

control="name-input"/>

Delete Person
nodeset="/PhoneList/Person[index('repeatPerson')]"
at="index('repeatPerson')" ev:event="DOMActivate" />

submission="update-from-local-file">
Reload

submission="save-to-local-file">
Save

submission="view-xml-instance">
View XML Instance

Discussion

This example uses the last() and index() XPath functions to find out what row of the table should be operated on.

You can also create a version that has a delete and add button in each row. In this design the index() function is used to delete the current row selected and insert after the currently selected row.

In some applications the order of rows is important. You can also add buttons to each row to move the selected row up or down.

Note that after you add the row, you should move the insert cursor to the first field. This is done by using the setfocus element.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.