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.

↑Jump back a section

Screen Image

Screen image right after insert selected
↑Jump back a section

Sample Program

<html 
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">
  <head>
    <style 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;
        }
    </style>
    <title>Demonstration of inserting and deleting records from a table</title>
    <xf:model id="phone-list">
       <xf:instance id="my-phone-list" src="phone-list.xml" xmlns="" />
       <xf:submission id="update-from-local-file" method="get" action="phone-list.xml"
           replace="instance" instance="my-phone-list"/>
       <xf:submission id="view-xml-instance" method="get" action="phone-list.xml" />
       <xf:submission id="save-to-local-file" method="put" action="phone-list.xml" />
    </xf:model>
  </head>
  <body>
 
    <!-- table header -->
    <div class="table-header">
        <div class="column-header">Name</div>
        <div class="column-header">Phone</div>
    </div>
 
    <!-- For each Person in the PersonList display the name and phone-->
    <xf:repeat nodeset="/PhoneList/Person" id="repeatPerson">
        <xf:input id="name-input" ref="Name"/>
        <xf:input ref="Phone"/>
        <br/>
    </xf:repeat>
 
     <xf:trigger>
        <xf:label>Add Person</xf:label>
        <xf:action ev:event="DOMActivate">
           <xf:insert nodeset="/PhoneList/Person[last()]" position="after" at="last()"/>
           <xf:setvalue ref="/PhoneList/Person[last()]/Name" value="''"/>
           <xf:setvalue ref="/PhoneList/Person[last()]/Phone" value="''"/>
           <!-- put the cursor in the name field -->
           <xf:setfocus control="name-input"/>
        </xf:action>
     </xf:trigger>
 
     <xf:trigger>
        <xf:label>Delete Person</xf:label>
        <xf:delete nodeset="/PhoneList/Person[index('repeatPerson')]" 
            at="index('repeatPerson')" ev:event="DOMActivate" />
      </xf:trigger>
   <br/>
 
    <xf:submit submission="update-from-local-file">
       <xf:label>Reload</xf:label>
    </xf:submit>
 
    <xf:submit submission="save-to-local-file">
       <xf:label>Save</xf:label>
    </xf:submit>
 
    <xf:submit submission="view-xml-instance">
       <xf:label>View XML Instance</xf:label>
    </xf:submit>
 
  </body>
</html>
↑Jump back a section

Discussion

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

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.

↑Jump back a section

References

Next Page: Highlight Selected Row | Previous Page: Trailing Insert and Delete

Home: XForms

↑Jump back a section
Last modified on 9 July 2009, at 20:30