ولادت حضرت معصومه (س) و روز دختر مبارک، (کد تخفیف 35%: rozedokhtar)

سبد خرید (0)

نحوه پر کردن عناصر مختلف صفحه

نمایش یک شی

هدف  W3Data  نمایش داده ها در صفحات HTML است.

برای نشان دادن قدرت W3Data، ما یک شی جاوا اسکریپت (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>
خودتان امتحان کنيد »