عرض كائن
والغرض من W3Data هو لعرض البيانات في صفحات HTML.
للتدليل على قوة W3Data، نحن سيتم عرض كائن جافا سكريبت (myObject).
الكائن هو مجموعة من الأشياء للعملاء مع CUSTOMERNAME، مدينة، وخصائص البلد:
myObject
var myObject = {"customers":[
{"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"CustomerName":"Around the Horn","City":"London","Country":"UK"},
{"CustomerName":"B's
Beverages","City":"London","Country":"UK"},
{"CustomerName":"Blauer See
Delikatessen","City":"Mannheim","Country":"Germany"},
{"CustomerName":"Bon
app'","City":"Marseille","Country":"France"},
{"CustomerName":"Bottom-Dollar
Marketse","City":"Tsawassen","Country":"Canada"},
{"CustomerName":"Chop-suey
Chinese","City":"Bern","Country":"Switzerland"}
]}; ملء منسدلة
مثال
<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك » ملء قائمة
مثال
<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك » ملء خانات الاختيار
مثال
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
<td><input
type="checkbox" {{checked}}"></td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك » تعبئة فئات
مثال
<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك » مثال
<table id="id01">
<tr w3-repeat="customers" class="{{Size}}">
<td>{{CustomerName}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك » ملء الجدول
مثال
<table id="id01">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td>{{City}}</td>
<td>{{Country}}</td>
</tr>
</table>
<script>
w3DisplayData("id01", myObject);
</script> انها محاولة لنفسك »