گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/04/21 - 17:14
كد :7701

چگونه با جاوا داده ها را نمایش بدهیم

در این مقاله با کمک کتابخانه w3.js به المان های html محتوا اضافه خواهیم کرد . میتوان این محتوا ها را از بانک داده نیز خواند.

نحوه نمایش داده ها با جاوا

در این آموزش از کتابخانه w3.js  برای به نمایش درآوردن اطلاعات در تگ های html استفاده خواهیم کرد.

همانطور که میبینید ما برای هر المان html از براکت استفاده کرده ایم.

مثال:

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

با کمک مثل زیر ما نام و فامیل را در المان div بالا به نمایش در می آوریم.

مثال:

<script>
var myObject = {"firstName" : "John", "lastName" : "Doe"};
w3.displayObject(
"id01", myObject);
</script>

مشاهده نتیجه

ایجاد محتوا برای یک لیست باز شونده

مثال

<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>

مشاهده نتیجه

ایجاد محتوا برای چک باکس ها :

مثال:

<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 با جاوا

مثال:

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

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

مشاهده نتیجه

 

نظرات كاربران :