ការបង្ហាញទិន្ន័យនៅក្នុងតារាងជាមួយ javascript
Static
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody id="body-table">
</tbody>
</table>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded" ,function(){
var tbody = document.getElementById("body-table");
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var col3 = document.createElement("td");
col1.textContent = 1;
col2.textContent = 'Dul';
col3.textContent = 35;
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
tbody.appendChild(row);
});
</script>
Data dynamic with array
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Number</th>
</tr>
</thead>
<tbody id="body-table">
</tbody>
</table>
</body>
</html>
<script>
var data = [
[1,"DUL",35],
[2,"Seng",25],
[3,"Mom", 50],
];
document.addEventListener("DOMContentLoaded" ,function(){
data.forEach(function(r){
var tbody = document.getElementById("body-table");
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var col3 = document.createElement("td");
col1.textContent = r[0];
col2.textContent = r[1];
col3.textContent = r[2];
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
tbody.appendChild(row);
})
});
</script>
0 Comments