<style scoped>
/* custom styles for this example */
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
#complex tbody, #complex thead {
border:3px solid #CCC;
}
</style>
<form id="demo">
<h4>Simple Table</h4>
<h6>Data</h6>
<table id="simple">
<tr>
<td>coffee</td>
<td>1.25</td>
</tr>
<tr>
<td>juice</td>
<td>2.00</td>
</tr>
<tr>
<td>tea</td>
<td>1.25</td>
</tr>
<tr>
<td>soda</td>
<td>1.00</td>
</tr>
</table>
<h6>Schema</h6>
<pre>
{
// Each record is held in a TR
resultListLocator: "tr",
// Note that the XPath indexes are 1-based!
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}]
}
</pre>
<h6>Normalized data</h6>
<input type="button" id="demo_apply_basic" value="Apply schema =>">
<div id="demo_output_basic" class="output"></div>
<h4>Complex table</h4>
<h6>Data</h6>
<table id="complex">
<thead>
<tr>
<th>item</th>
<th>price</th>
</tr>
</thead>
<tbody>
<tr>
<td>hamburger</td>
<td>4.00</td>
</tr>
<tr>
<td>cheeseburger</td>
<td>4.50</td>
</tr>
<tr>
<td>veggie burger</td>
<td>4.00</td>
</tr>
<tr>
<td>salmon burger</td>
<td>5.00</td>
</tr>
</tbody>
<tbody>
<tr>
<td>french fries</td>
<td>1.50</td>
</tr>
<tr>
<td>onion rings</td>
<td>2.00</td>
</tr>
<tr>
<td>fruit salad</td>
<td>2.50</td>
</tr>
<tr>
<td>side salad</td>
<td>2.00</td>
</tr>
</tbody>
<tbody>
<tr>
<td>coffee</td>
<td>1.25</td>
</tr>
<tr>
<td>juice</td>
<td>2.00</td>
</tr>
<tr>
<td>tea</td>
<td>1.25</td>
</tr>
<tr>
<td>soda</td>
<td>1.00</td>
</tr>
</tbody>
</table>
<h6>Schema</h6>
<pre>
// This schema is dynamically generated
{
// Each record is held in a TR
resultListLocator: "tr",
// Note that the XPath indexes are 1-based!
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}]
}
</pre>
<h6>Normalized data</h6>
<input type="button" id="demo_apply_complex" value="Apply schema =>">
<div id="demo_output_complex" class="output"></div>
</form>
<script>
YUI().use("dump", "node", "datatype-xml", "dataschema-xml", function (Y) {
Y.on("click", function(e){
var tableEl = Y.Node.getDOMNode(Y.one("#simple")),
schema = {
// Each record is held in a TR
resultListLocator: "tr",
// Note that the XPath indexes are 1-based!
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}]
};
}, "#demo_apply_basic");
Y.on("click", function(e){
// This function generates a schema based on contents of a TABLE element
var getSchemaFromTableNode = function(tableNode) {
var fields = [],
// Each record is held in a TR
schema = {resultListLocator:"tr"},
// Each field name is held in a TH
thList = tableNode.all("th");
// Generate field definitions based on TH
thList.each(function(thNode, i){
// Note that the XPath indexes are 1-based!
fields.push({key:thNode.get("text"), locator:"td["+(i+1)+"]"});
});
schema.resultFields = fields;
return schema;
};
var tableNode = Y.one("#complex"),
// Generate schema dynamically
schema = getSchemaFromTableNode(tableNode),
// Create a temporary TBODY container to hold all data TRs
tbody = document.createElement("tbody"),
tbodyContainer = document.createDocumentFragment().appendChild(tbody);
// Grab each TR in a TBODY but don't include TRs from the THEAD
Y.all("#complex tbody tr").each(function(trNode, i){
// Cloning the TR keeps it in the document (optional)
// Append each TR to the container
tbodyContainer.appendChild(Y.Node.getDOMNode(trNode).cloneNode(true));
})
}, "#demo_apply_complex");
});
</script>