Wicker Wings

太字で書かれた部分がSpryに関するコードです。
Spryに関しては前回と変更はありません。»前回の解説

  <div spry:region="dsUser">
    <table>
      <caption>User List</caption>
      <thead>
        <tr>
          <th scope="col" spry:sort="account">ACCOUNT<th>
          <th scope="col" spry:sort="username">NAME</th>
          <th scope="col" spry:sort="address">ADDRESS</th>
          <th scope="col" spry:sort="date">DATE</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="4">データ部をクリックすると更新フォームに反映します</td>
        </tr>
      </tfoot>
      <tbody spry:repeat="dsUser" spry:choose="choose">
        <tr spry:when="{ds_RowID} == {ds_CurrentRowID}" class="{ds_EvenOddRow}" spry:setrow="dsUser" spry:select="selected">
          <td>{account}</td>
          <td>{username}</td>
          <td>{address}</td>
          <td>{date}</td>
        </tr>
        <tr spry:default="default" class="{ds_EvenOddRow}" spry:setrow="dsUser" spry:select="selected">
          <td>{account}</td>
          <td>{username}</td>
          <td>{address}</td>
          <td>{date}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div spry:detailregion="dsUser" class="detail clearfix">
      <h3>Detail</h3>
      <form action="index.html" id="updateform" onsubmit="return false;">
      <div spry:detailregion="dsUser">
      <div>
      <lavel for="account">ACCOUNT<input type="text" name="account" id="account" value="{account}" /></label><br />
      <label for="username">NAME<input type="text" name="username" id="username" value="{username}" /></label><br />
      <label for="address">ADDRESS<input type="text" name="address" id="address" value="{address}" /></label><br />
      <label for="date">DATE<input type="text" name="date" id="date" value="{date}" /></label><br />
      </div>
      <div>
      <input type="button" value="INSERT" onclick="InsertRow();" />
      <input type="button" value="UPDATE" onclick="UpdateRow();" />
      <input type="button" value="DELETE" onclick="DeleteRow();" />
      </div>
      </div>
      </form>
  </div>

<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
<!--
var dsUser = new Spry.Data.XMLDataSet("spry_data.xml", "userinfo/user");
//-->
</script>

spryフレームワークのxpath.jsとSpryData.jsを読み込みます。
xpath.jsはspryフレームワークの中でもほとんどのライブラリで使用していますので、最初に記述しておきます。
その後、Spry.Data.XMLDataSet()を使ってxmlファイルと、その中で定義されているXMLのパスを指定します。

var InsertRow=function(){
    var frm=document.getElementById('updateform');
    var account=frm.elements['account'].value;
    var username=frm.elements['username'].value;
    var address=frm.elements['address'].value;
    var d=new Date();
    var newDate=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
    
    var newLine=dsUser.data.length;
    dsUser.dataHash[newLine]=new Array();
    dsUser.setCurrentRow(newLine);
    var row=dsUser.getCurrentRow();
    row["ds_RowID"]=newLine;
    row["account"]=account;
    row["username"]=username;
    row["address"]=address;
    row["date"]=newDate;
    dsUser.data[newLine]=dsUser.dataHash[newLine];
    Spry.Data.updateAllRegions();
};

var UpdateRow=function(){
    var frm=document.getElementById('updateform');
    var row=dsUser.getCurrentRow();
    row["account"]=frm.account.value;
    row["username"]=frm.username.value;
    row["address"]=frm.address.value;
    row["date"]=frm.date.value;
    Spry.Data.updateAllRegions();
};

var DeleteRow=function(){
    var row=dsUser.getCurrentRow();
    var currentAccount=row.account;
    var FilterDelete=function(ds, row, rowNumber){
        if(row.account==currentAccount){
            return null;
        }
        row.ds_RowID=ds.data.length;
        return row;
    };
    dsUser.filterData(FilterDelete);
    Spry.Data.updateAllRegions();
};

Insert、Update時のaccountの重複チェックはしていません。
解説は太字部分にマウスカーソルを当ててください

Insert部分のds_RowIDはSpry.Data.XMLDataSetが作成、使用しているプロパティです。
設定しなくても動きますが、filterやsortなどに影響が出るかもしれません。

.even{
    background-color: #ffffff;
}
.odd{
    background-color: #cccccc;
}
.selected{
    background-color: #ffcccc;
}