|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: DataSchema Utility: DataSchema.XML for HTML Tables</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
/* custom styles for this example */ |
|
|
21 |
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;} |
|
|
22 |
#complex tbody, #complex thead { |
|
|
23 |
border:3px solid #CCC; |
|
|
24 |
} |
|
|
25 |
</style> |
|
|
26 |
|
|
|
27 |
</head> |
|
|
28 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
29 |
<div id="custom-doc" class="yui-t2"> |
|
|
30 |
<div id="hd"> |
|
|
31 |
<div id="ygunav"> |
|
|
32 |
<p> |
|
|
33 |
<em> |
|
|
34 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
35 |
</em> |
|
|
36 |
</p> |
|
|
37 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
38 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
39 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
40 |
<div id="sitesearch"> |
|
|
41 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
42 |
<input type="text" id="searchinput" name="p"> |
|
|
43 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
44 |
</div> |
|
|
45 |
</form> |
|
|
46 |
</div> |
|
|
47 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
48 |
<div id="pagetitle"><h1>YUI Library Examples: DataSchema Utility: DataSchema.XML for HTML Tables</h1></div> |
|
|
49 |
</div> |
|
|
50 |
<div id="bd"> |
|
|
51 |
|
|
|
52 |
|
|
|
53 |
<div id="yui-main"> |
|
|
54 |
<div class="yui-b"> |
|
|
55 |
<div class="yui-ge"> |
|
|
56 |
<div class="yui-u first example" id="main"> |
|
|
57 |
|
|
|
58 |
<h2>DataSchema Utility: DataSchema.XML for HTML Tables</h2> |
|
|
59 |
|
|
|
60 |
<div id="example" class="promo"> |
|
|
61 |
<div class="example-intro"> |
|
|
62 |
DataSchema.XML can be used to retrieve data held in HTML TABLE elements. |
|
|
63 |
</div> |
|
|
64 |
|
|
|
65 |
<div class="module example-container "> |
|
|
66 |
<div class="hd exampleHd"> |
|
|
67 |
<p class="newWindowButton yui-skin-sam"> |
|
|
68 |
<a href="dataschema_table_clean.html" target="_blank">View example in new window.</a> |
|
|
69 |
</p> |
|
|
70 |
</div> <div id="example-canvas" class="bd"> |
|
|
71 |
|
|
|
72 |
|
|
|
73 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
74 |
|
|
|
75 |
<form id="demo"> |
|
|
76 |
<h4>Simple Table</h4> |
|
|
77 |
<h6>Data</h6> |
|
|
78 |
|
|
|
79 |
<table id="simple"> |
|
|
80 |
<tr> |
|
|
81 |
<td>coffee</td> |
|
|
82 |
<td>1.25</td> |
|
|
83 |
</tr> |
|
|
84 |
<tr> |
|
|
85 |
<td>juice</td> |
|
|
86 |
<td>2.00</td> |
|
|
87 |
</tr> |
|
|
88 |
<tr> |
|
|
89 |
<td>tea</td> |
|
|
90 |
<td>1.25</td> |
|
|
91 |
</tr> |
|
|
92 |
<tr> |
|
|
93 |
<td>soda</td> |
|
|
94 |
<td>1.00</td> |
|
|
95 |
</tr> |
|
|
96 |
</table> |
|
|
97 |
|
|
|
98 |
|
|
|
99 |
<h6>Schema</h6> |
|
|
100 |
<pre> |
|
|
101 |
{ |
|
|
102 |
// Each record is held in a TR |
|
|
103 |
resultListLocator: "tr", |
|
|
104 |
// Note that the XPath indexes are 1-based! |
|
|
105 |
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}] |
|
|
106 |
} |
|
|
107 |
</pre> |
|
|
108 |
|
|
|
109 |
<h6>Normalized data</h6> |
|
|
110 |
<input type="button" id="demo_apply_basic" value="Apply schema =>"> |
|
|
111 |
<div id="demo_output_basic" class="output"></div> |
|
|
112 |
|
|
|
113 |
<h4>Complex table</h4> |
|
|
114 |
<h6>Data</h6> |
|
|
115 |
|
|
|
116 |
<table id="complex"> |
|
|
117 |
<thead> |
|
|
118 |
<tr> |
|
|
119 |
<th>item</th> |
|
|
120 |
<th>price</th> |
|
|
121 |
</tr> |
|
|
122 |
</thead> |
|
|
123 |
<tbody> |
|
|
124 |
<tr> |
|
|
125 |
<td>hamburger</td> |
|
|
126 |
<td>4.00</td> |
|
|
127 |
</tr> |
|
|
128 |
<tr> |
|
|
129 |
<td>cheeseburger</td> |
|
|
130 |
<td>4.50</td> |
|
|
131 |
</tr> |
|
|
132 |
<tr> |
|
|
133 |
<td>veggie burger</td> |
|
|
134 |
<td>4.00</td> |
|
|
135 |
</tr> |
|
|
136 |
<tr> |
|
|
137 |
<td>salmon burger</td> |
|
|
138 |
<td>5.00</td> |
|
|
139 |
</tr> |
|
|
140 |
</tbody> |
|
|
141 |
<tbody> |
|
|
142 |
<tr> |
|
|
143 |
<td>french fries</td> |
|
|
144 |
<td>1.50</td> |
|
|
145 |
</tr> |
|
|
146 |
<tr> |
|
|
147 |
<td>onion rings</td> |
|
|
148 |
<td>2.00</td> |
|
|
149 |
</tr> |
|
|
150 |
<tr> |
|
|
151 |
<td>fruit salad</td> |
|
|
152 |
<td>2.50</td> |
|
|
153 |
</tr> |
|
|
154 |
<tr> |
|
|
155 |
<td>side salad</td> |
|
|
156 |
<td>2.00</td> |
|
|
157 |
</tr> |
|
|
158 |
</tbody> |
|
|
159 |
<tbody> |
|
|
160 |
<tr> |
|
|
161 |
<td>coffee</td> |
|
|
162 |
<td>1.25</td> |
|
|
163 |
</tr> |
|
|
164 |
<tr> |
|
|
165 |
<td>juice</td> |
|
|
166 |
<td>2.00</td> |
|
|
167 |
</tr> |
|
|
168 |
<tr> |
|
|
169 |
<td>tea</td> |
|
|
170 |
<td>1.25</td> |
|
|
171 |
</tr> |
|
|
172 |
<tr> |
|
|
173 |
<td>soda</td> |
|
|
174 |
<td>1.00</td> |
|
|
175 |
</tr> |
|
|
176 |
</tbody> |
|
|
177 |
</table> |
|
|
178 |
|
|
|
179 |
<h6>Schema</h6> |
|
|
180 |
<pre> |
|
|
181 |
// This schema is dynamically generated |
|
|
182 |
{ |
|
|
183 |
// Each record is held in a TR |
|
|
184 |
resultListLocator: "tr", |
|
|
185 |
// Note that the XPath indexes are 1-based! |
|
|
186 |
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}] |
|
|
187 |
} |
|
|
188 |
</pre> |
|
|
189 |
|
|
|
190 |
<h6>Normalized data</h6> |
|
|
191 |
<input type="button" id="demo_apply_complex" value="Apply schema =>"> |
|
|
192 |
<div id="demo_output_complex" class="output"></div> |
|
|
193 |
</form> |
|
|
194 |
|
|
|
195 |
|
|
|
196 |
<script type="text/javascript"> |
|
|
197 |
YUI({base:"../../build/", timeout: 10000}).use("dump", "node", "dataschema-xml", function (Y) { |
|
|
198 |
Y.on("click", function(e){ |
|
|
199 |
var tableEl = Y.Node.getDOMNode(Y.get("#simple")), |
|
|
200 |
schema = { |
|
|
201 |
// Each record is held in a TR |
|
|
202 |
resultListLocator: "tr", |
|
|
203 |
// Note that the XPath indexes are 1-based! |
|
|
204 |
resultFields: [{key:"beverage", locator:"td[1]"}, {key:"price", locator:"td[2]"}] |
|
|
205 |
}; |
|
|
206 |
Y.get("#demo_output_basic").setContent(Y.dump(Y.DataSchema.XML.apply(schema, tableEl))); |
|
|
207 |
}, "#demo_apply_basic"); |
|
|
208 |
|
|
|
209 |
|
|
|
210 |
Y.on("click", function(e){ |
|
|
211 |
// This function generates a schema based on contents of a TABLE element |
|
|
212 |
var getSchemaFromTableNode = function(tableNode) { |
|
|
213 |
var fields = [], |
|
|
214 |
// Each record is held in a TR |
|
|
215 |
schema = {resultListLocator:"tr"}, |
|
|
216 |
// Each field name is held in a TH |
|
|
217 |
thList = tableNode.queryAll("th"); |
|
|
218 |
|
|
|
219 |
// Generate field definitions based on TH |
|
|
220 |
thList.each(function(thNode, i){ |
|
|
221 |
// Note that the XPath indexes are 1-based! |
|
|
222 |
fields.push({key:thNode.get("text"), locator:"td["+(i+1)+"]"}); |
|
|
223 |
}); |
|
|
224 |
schema.resultFields = fields; |
|
|
225 |
return schema; |
|
|
226 |
}; |
|
|
227 |
|
|
|
228 |
var tableNode = Y.get("#complex"), |
|
|
229 |
// Generate schema dynamically |
|
|
230 |
schema = getSchemaFromTableNode(tableNode), |
|
|
231 |
// Create a temporary TBODY container to hold all data TRs |
|
|
232 |
tbody = document.createElement("tbody"), |
|
|
233 |
tbodyContainer = document.createDocumentFragment().appendChild(tbody); |
|
|
234 |
|
|
|
235 |
// Grab each TR in a TBODY but don't include TRs from the THEAD |
|
|
236 |
Y.all("#complex tbody tr").each(function(trNode, i){ |
|
|
237 |
// Cloning the TR keeps it in the document (optional) |
|
|
238 |
// Append each TR to the container |
|
|
239 |
tbodyContainer.appendChild(Y.Node.getDOMNode(trNode).cloneNode(true)); |
|
|
240 |
}) |
|
|
241 |
|
|
|
242 |
Y.get("#demo_output_complex").setContent(Y.dump(Y.DataSchema.XML.apply(schema, tbodyContainer))); |
|
|
243 |
}, "#demo_apply_complex"); |
|
|
244 |
}); |
|
|
245 |
</script> |
|
|
246 |
|
|
|
247 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
248 |
|
|
|
249 |
|
|
|
250 |
</div> |
|
|
251 |
</div> |
|
|
252 |
</div> |
|
|
253 |
|
|
|
254 |
<p>DataSource.XML's <code>apply()</code> method supports passing in DOM nodes or document fragments. Use XPath strings to define data locations. In this example, we are retrieving data held in the rows of a TABLE element.</p> |
|
|
255 |
|
|
|
256 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"dataschema-xml"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tableEl <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">getDOMNode</span><span class="br0">(</span>Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#simple"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> schema <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Each record is held in a TR</span></div></li><li class="li2"><div class="de2"> resultListLocator<span class="sy0">:</span> <span class="st0">"tr"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Note that the XPath indexes are 1-based!</span></div></li><li class="li1"><div class="de1"> resultFields<span class="sy0">:</span> <span class="br0">[</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span>key<span class="sy0">:</span><span class="st0">"beverage"</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td[1]"</span><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span>key<span class="sy0">:</span><span class="st0">"price"</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td[2]"</span><span class="br0">}</span></div></li><li class="li2"><div class="de2"> <span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> data_out <span class="sy0">=</span> Y.<span class="me1">DataSchema</span>.<span class="me1">XML</span>.<span class="me1">apply</span><span class="br0">(</span>schema<span class="sy0">,</span> tableEl<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw3">alert</span><span class="br0">(</span>data_out<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"dataschema-xml"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
257 |
<span class="kw2">var</span> tableEl <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">getDOMNode</span><span class="br0">(</span>Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#simple"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
258 |
schema <span class="sy0">=</span> <span class="br0">{</span> |
|
|
259 |
<span class="co1">// Each record is held in a TR</span> |
|
|
260 |
resultListLocator<span class="sy0">:</span> <span class="st0">"tr"</span><span class="sy0">,</span> |
|
|
261 |
<span class="co1">// Note that the XPath indexes are 1-based!</span> |
|
|
262 |
resultFields<span class="sy0">:</span> <span class="br0">[</span> |
|
|
263 |
<span class="br0">{</span>key<span class="sy0">:</span><span class="st0">"beverage"</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td[1]"</span><span class="br0">}</span><span class="sy0">,</span> |
|
|
264 |
<span class="br0">{</span>key<span class="sy0">:</span><span class="st0">"price"</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td[2]"</span><span class="br0">}</span> |
|
|
265 |
<span class="br0">]</span> |
|
|
266 |
<span class="br0">}</span><span class="sy0">,</span> |
|
|
267 |
data_out <span class="sy0">=</span> Y.<span class="me1">DataSchema</span>.<span class="me1">XML</span>.<span class="me1">apply</span><span class="br0">(</span>schema<span class="sy0">,</span> tableEl<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
268 |
|
|
|
269 |
<span class="kw3">alert</span><span class="br0">(</span>data_out<span class="br0">)</span><span class="sy0">;</span> |
|
|
270 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">YUI().use("dataschema-xml", function(Y) { |
|
|
271 |
var tableEl = Y.Node.getDOMNode(Y.get("#simple")), |
|
|
272 |
schema = { |
|
|
273 |
// Each record is held in a TR |
|
|
274 |
resultListLocator: "tr", |
|
|
275 |
// Note that the XPath indexes are 1-based! |
|
|
276 |
resultFields: [ |
|
|
277 |
{key:"beverage", locator:"td[1]"}, |
|
|
278 |
{key:"price", locator:"td[2]"} |
|
|
279 |
] |
|
|
280 |
}, |
|
|
281 |
data_out = Y.DataSchema.XML.apply(schema, tableEl)); |
|
|
282 |
|
|
|
283 |
alert(data_out); |
|
|
284 |
});</textarea></div> |
|
|
285 |
<p>If the table has a THEAD element and/or multiple TBODY elements, special considerations must be taken to apply the schema to the appropriate collection of TR elements. In the following complex example we leverage the power of the Node API to</p> |
|
|
286 |
|
|
|
287 |
<ul> |
|
|
288 |
<li>Access the contents of the THEAD to generate our schema dynamically;</li> |
|
|
289 |
<li>and access only the TR elements contained in TBODY elements for data values, ignoring those TR elements in the THEAD.</li> |
|
|
290 |
</ul> |
|
|
291 |
|
|
|
292 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"dataschema-xml"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// This function generates a schema based on contents of a TABLE element</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> getSchemaFromTableNode <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>tableNode<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> fields <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="co1">// Each record is held in a TR</span></div></li><li class="li1"><div class="de1"> schema <span class="sy0">=</span> <span class="br0">{</span>resultListLocator<span class="sy0">:</span><span class="st0">"tr"</span><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Each field name is held in a TH</span></div></li><li class="li1"><div class="de1"> thList <span class="sy0">=</span> tableNode.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">"th"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Generate field definitions based on TH</span></div></li><li class="li1"><div class="de1"> thList.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>thNode<span class="sy0">,</span> i<span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Note that the XPath indexes are 1-based!</span></div></li><li class="li1"><div class="de1"> fields.<span class="me1">push</span><span class="br0">(</span><span class="br0">{</span>key<span class="sy0">:</span>thNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">"text"</span><span class="br0">)</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td["</span><span class="sy0">+</span><span class="br0">(</span>i<span class="sy0">+</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">+</span><span class="st0">"]"</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> schema.<span class="me1">resultFields</span> <span class="sy0">=</span> fields<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> schema<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> tableNode <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#complex"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> <span class="co1">// Generate schema dynamically</span></div></li><li class="li1"><div class="de1"> schema <span class="sy0">=</span> getSchemaFromTableNode<span class="br0">(</span>tableNode<span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Create a temporary TBODY container to hold all data TRs</span></div></li><li class="li1"><div class="de1"> tbody <span class="sy0">=</span> document.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">"tbody"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> tbodyContainer <span class="sy0">=</span> document.<span class="me1">createDocumentFragment</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>tbody<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Grab each TR in a TBODY but don't include TRs from the THEAD</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">"#complex tbody tr"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>trNode<span class="sy0">,</span> i<span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Cloning the TR keeps it in the document (optional)</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Append each TR to the container</span></div></li><li class="li2"><div class="de2"> tbodyContainer.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">getDOMNode</span><span class="br0">(</span>trNode<span class="br0">)</span>.<span class="me1">cloneNode</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> data_out <span class="sy0">=</span> Y.<span class="me1">DataSchema</span>.<span class="me1">XML</span>.<span class="me1">apply</span><span class="br0">(</span>schema<span class="sy0">,</span> tbodyContainer<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="kw3">alert</span><span class="br0">(</span>data_out<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"dataschema-xml"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
293 |
<span class="co1">// This function generates a schema based on contents of a TABLE element</span> |
|
|
294 |
<span class="kw2">var</span> getSchemaFromTableNode <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>tableNode<span class="br0">)</span> <span class="br0">{</span> |
|
|
295 |
<span class="kw2">var</span> fields <span class="sy0">=</span> <span class="br0">[</span><span class="br0">]</span><span class="sy0">,</span> |
|
|
296 |
<span class="co1">// Each record is held in a TR</span> |
|
|
297 |
schema <span class="sy0">=</span> <span class="br0">{</span>resultListLocator<span class="sy0">:</span><span class="st0">"tr"</span><span class="br0">}</span><span class="sy0">,</span> |
|
|
298 |
<span class="co1">// Each field name is held in a TH</span> |
|
|
299 |
thList <span class="sy0">=</span> tableNode.<span class="me1">queryAll</span><span class="br0">(</span><span class="st0">"th"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
300 |
|
|
|
301 |
<span class="co1">// Generate field definitions based on TH</span> |
|
|
302 |
thList.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>thNode<span class="sy0">,</span> i<span class="br0">)</span><span class="br0">{</span> |
|
|
303 |
<span class="co1">// Note that the XPath indexes are 1-based!</span> |
|
|
304 |
fields.<span class="me1">push</span><span class="br0">(</span><span class="br0">{</span>key<span class="sy0">:</span>thNode.<span class="me1">get</span><span class="br0">(</span><span class="st0">"text"</span><span class="br0">)</span><span class="sy0">,</span> locator<span class="sy0">:</span><span class="st0">"td["</span><span class="sy0">+</span><span class="br0">(</span>i<span class="sy0">+</span><span class="nu0">1</span><span class="br0">)</span><span class="sy0">+</span><span class="st0">"]"</span><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
305 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
306 |
schema.<span class="me1">resultFields</span> <span class="sy0">=</span> fields<span class="sy0">;</span> |
|
|
307 |
<span class="kw1">return</span> schema<span class="sy0">;</span> |
|
|
308 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
309 |
|
|
|
310 |
<span class="kw2">var</span> tableNode <span class="sy0">=</span> Y.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#complex"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
311 |
<span class="co1">// Generate schema dynamically</span> |
|
|
312 |
schema <span class="sy0">=</span> getSchemaFromTableNode<span class="br0">(</span>tableNode<span class="br0">)</span><span class="sy0">,</span> |
|
|
313 |
<span class="co1">// Create a temporary TBODY container to hold all data TRs</span> |
|
|
314 |
tbody <span class="sy0">=</span> document.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">"tbody"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
315 |
tbodyContainer <span class="sy0">=</span> document.<span class="me1">createDocumentFragment</span><span class="br0">(</span><span class="br0">)</span>.<span class="me1">appendChild</span><span class="br0">(</span>tbody<span class="br0">)</span><span class="sy0">;</span> |
|
|
316 |
|
|
|
317 |
<span class="co1">// Grab each TR in a TBODY but don't include TRs from the THEAD</span> |
|
|
318 |
Y.<span class="me1">all</span><span class="br0">(</span><span class="st0">"#complex tbody tr"</span><span class="br0">)</span>.<span class="me1">each</span><span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span>trNode<span class="sy0">,</span> i<span class="br0">)</span><span class="br0">{</span> |
|
|
319 |
<span class="co1">// Cloning the TR keeps it in the document (optional)</span> |
|
|
320 |
<span class="co1">// Append each TR to the container</span> |
|
|
321 |
tbodyContainer.<span class="me1">appendChild</span><span class="br0">(</span>Y.<span class="me1">Node</span>.<span class="me1">getDOMNode</span><span class="br0">(</span>trNode<span class="br0">)</span>.<span class="me1">cloneNode</span><span class="br0">(</span><span class="kw2">true</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
322 |
<span class="br0">}</span><span class="br0">)</span> |
|
|
323 |
|
|
|
324 |
<span class="kw2">var</span> data_out <span class="sy0">=</span> Y.<span class="me1">DataSchema</span>.<span class="me1">XML</span>.<span class="me1">apply</span><span class="br0">(</span>schema<span class="sy0">,</span> tbodyContainer<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
325 |
|
|
|
326 |
<span class="kw3">alert</span><span class="br0">(</span>data_out<span class="br0">)</span><span class="sy0">;</span> |
|
|
327 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">YUI().use("dataschema-xml", function(Y) { |
|
|
328 |
// This function generates a schema based on contents of a TABLE element |
|
|
329 |
var getSchemaFromTableNode = function(tableNode) { |
|
|
330 |
var fields = [], |
|
|
331 |
// Each record is held in a TR |
|
|
332 |
schema = {resultListLocator:"tr"}, |
|
|
333 |
// Each field name is held in a TH |
|
|
334 |
thList = tableNode.queryAll("th"); |
|
|
335 |
|
|
|
336 |
// Generate field definitions based on TH |
|
|
337 |
thList.each(function(thNode, i){ |
|
|
338 |
// Note that the XPath indexes are 1-based! |
|
|
339 |
fields.push({key:thNode.get("text"), locator:"td["+(i+1)+"]"}); |
|
|
340 |
}); |
|
|
341 |
schema.resultFields = fields; |
|
|
342 |
return schema; |
|
|
343 |
}; |
|
|
344 |
|
|
|
345 |
var tableNode = Y.get("#complex"), |
|
|
346 |
// Generate schema dynamically |
|
|
347 |
schema = getSchemaFromTableNode(tableNode), |
|
|
348 |
// Create a temporary TBODY container to hold all data TRs |
|
|
349 |
tbody = document.createElement("tbody"), |
|
|
350 |
tbodyContainer = document.createDocumentFragment().appendChild(tbody); |
|
|
351 |
|
|
|
352 |
// Grab each TR in a TBODY but don't include TRs from the THEAD |
|
|
353 |
Y.all("#complex tbody tr").each(function(trNode, i){ |
|
|
354 |
// Cloning the TR keeps it in the document (optional) |
|
|
355 |
// Append each TR to the container |
|
|
356 |
tbodyContainer.appendChild(Y.Node.getDOMNode(trNode).cloneNode(true)); |
|
|
357 |
}) |
|
|
358 |
|
|
|
359 |
var data_out = Y.DataSchema.XML.apply(schema, tbodyContainer)); |
|
|
360 |
|
|
|
361 |
alert(data_out); |
|
|
362 |
});</textarea></div> </div> |
|
|
363 |
<div class="yui-u sidebar"> |
|
|
364 |
|
|
|
365 |
|
|
|
366 |
<div id="examples" class="mod box4"> |
|
|
367 |
<div class="hd"> |
|
|
368 |
<h4> |
|
|
369 |
DataSchema Utility Examples:</h4> |
|
|
370 |
</div> |
|
|
371 |
<div class="bd"> |
|
|
372 |
<ul> |
|
|
373 |
<li><a href='../dataschema/dataschema_array.html'>DataSchema.Array</a></li><li><a href='../dataschema/dataschema_json.html'>DataSchema.JSON</a></li><li class='selected'><a href='../dataschema/dataschema_table.html'>DataSchema.XML for HTML Tables</a></li><li><a href='../dataschema/dataschema_xml.html'>DataSchema.XML for XML Data</a></li><li><a href='../dataschema/dataschema_text.html'>DataSchema.Text</a></li><li><a href='../dataschema/dataschema_parsing.html'>Enforcing DataTypes</a></li><li><a href='../datasource/datasource_caching.html'>DataSource with Caching (included with examples for DataSource Utility)</a></li><li><a href='../datasource/datasource_function.html'>DataSource.Function (included with examples for DataSource Utility)</a></li><li><a href='../datasource/datasource_get.html'>DataSource.Get (included with examples for DataSource Utility)</a></li><li><a href='../datasource/datasource_io.html'>DataSource.IO (included with examples for DataSource Utility)</a></li><li><a href='../datasource/datasource_local.html'>DataSource.Local (included with examples for DataSource Utility)</a></li> </ul> |
|
|
374 |
</div> |
|
|
375 |
</div> |
|
|
376 |
|
|
|
377 |
<div class="mod box4"> |
|
|
378 |
<div class="hd"> |
|
|
379 |
<h4>More DataSchema Utility Resources:</h4> |
|
|
380 |
</div> |
|
|
381 |
<div class="bd"> |
|
|
382 |
<ul> |
|
|
383 |
<!-- <li><a href="http://developer.yahoo.com/yui/dataschema/">User's Guide</a> (external)</li> --> |
|
|
384 |
<li><a href="../../api/module_dataschema.html">API Documentation</a></li></ul> |
|
|
385 |
</div> |
|
|
386 |
</div> |
|
|
387 |
</div> |
|
|
388 |
</div> |
|
|
389 |
|
|
|
390 |
</div> |
|
|
391 |
</div> |
|
|
392 |
|
|
|
393 |
|
|
|
394 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
395 |
<!-- TABLE OF CONTENTS --> |
|
|
396 |
<div id="toc"> |
|
|
397 |
|
|
|
398 |
<ul> |
|
|
399 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="selected "><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul> |
|
|
400 |
</div> |
|
|
401 |
</div> |
|
|
402 |
</div><!--closes bd--> |
|
|
403 |
|
|
|
404 |
<div id="ft"> |
|
|
405 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
406 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
407 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
408 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
409 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
410 |
</div> |
|
|
411 |
</div> |
|
|
412 |
<script language="javascript"> |
|
|
413 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
414 |
</script> |
|
|
415 |
<script src="../../assets/syntax.js"></script> |
|
|
416 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
417 |
<script language="javascript"> |
|
|
418 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
419 |
</script> |
|
|
420 |
</body> |
|
|
421 |
</html> |