W3.JS သည် HTML Data ကိုပြသသည်။

HTML တွင် ဒေတာကို ပြသသည်-

w3.displayObject(selector)

အသုံးပြုရလွယ်ကူသည်။

သင့်ဒေတာအတွက် နေရာလွတ်ကို သီးသန့်ထားရန် {{ }} ကွင်း စကွင်းပိတ် ကို မည်သည့် HTML အစိတ်အပိုင်းတွင်မဆို ပေါင်းထည့်လိုက်ပါ-

ဥပမာ

<div id="id01">
{{firstName}} {{lastName}}
</div>

သင်၏ HTML တွင်ဒေတာကိုပြသရန် နောက်ဆုံးတွင် w3.displayObject ကိုခေါ်ဆိုပါ-

ဥပမာ

ပထမဘောင်သည် (id01) ကို အသုံးပြုရန် HTML အစိတ်အပိုင်း၏ အိုင်ဒီဖြစ်သည်။
ဒုတိယဘောင်သည် ပြသရန် ဒေတာအရာဝတ္ထု (myObject) ဖြစ်သည်။

ပိုကြီးသောအရာကိုပြသခြင်း။

W3.JS ၏ စွမ်းအားကို သရုပ်ပြရန်၊ ကျွန်ုပ်တို့သည် ပိုကြီးသော JavaScript အရာဝတ္ထု (myObject) ကို ပြသပါမည်။

အရာဝတ္ထုသည် ဖောက်သည်အမည်၊ မြို့နှင့် နိုင်ငံဂုဏ်သတ္တိများပါရှိသော ဖောက်သည်အရာဝတ္တုများ၏ အခင်းအကျင်းတစ်ခုဖြစ်သည်။

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"}
]};

Dropdown ဖြည့်ခြင်း။

ဥပမာ

<select id="id01">
<option w3-repeat="customers">{{CustomerName}}</option>
</select>

<script>
w3.displayObject("id01", myObject);
</script>

စာရင်းဖြည့်ခြင်း။

ဥပမာ

<ul id="id01">
<li w3-repeat="customers">{{CustomerName}}</li>
</ul>

<script>
w3.displayObject("id01", myObject);
</script>

w3.displayObject ကို w3.includeHTML နှင့် ပေါင်းစပ်ခြင်း။

ဝဘ်စာမျက်နှာတစ်ခုတွင် HTML အတိုအထွာများကို သင်ထည့်သွင်းသောအခါ၊ HTML တွင် ကောင်းစွာမပါဝင်မီတွင် ပါဝင်သော အခြားလုပ်ဆောင်ချက်များသည် HTML ကို ကောင်းစွာမလုပ်ဆောင်နိုင်စေရန် လုံခြုံစေရပါမည်။

ကုဒ်ကို "ပြန်ထိန်းထားရန်" အလွယ်ဆုံးနည်းလမ်းမှာ ၎င်းကို ပြန်ခေါ်သည့်လုပ်ဆောင်ချက်တွင် ထည့်သွင်းရန်ဖြစ်သည်။

w3.includeHTML():

ဥပမာ

<div w3-include-html="list.html"></div>

<script>
w3.includeHTML(myCallback);

function myCallback() {
w3.displayObject("id01", myObject);
}
</script>

Check Box များဖြည့်ခြင်း။

ဥပမာ

<table id="id01">
<tr w3-repeat="customers">
<td>{{CustomerName}}</td>
<td><input type="checkbox" {{checked}}"></td>
</tr>
</table>

<script>
w3.displayObject("id01", myObject);
</script>

ဖြည့်စွက်သင်တန်းများ

ဥပမာ

<table id="id01">
<tr w3-repeat="customers" class="{{Color}}">
<td>{{CustomerName}}</td>
</tr>
</table>

<script>
w3.displayObject("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>
w3.displayObject("id01", myObject);
</script>

<select> Element ကို ဖြည့်စွက်ခြင်း။

ဥပမာ

<select id="id01">
<option w3-repeat="x in cars">{{x}}</option>
</select>

<script>
w3.displayObject("id01", {"cars" : ["Volvo", "Ford", "BMW", "Mercedes"]});
</script>

❮ ယခင် နောက်တစ်ခု ❯