Hi, as I need to dynamically create my HTML Table, so I defined a function at the template page,
displayItemRow(item) {
var table = document.getElementById("product-cart").getElementsByTagName('tbody')[0];
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var _tempTotal = item.qty * item.price;
cell1.innerHTML = '<td class="checkbox-cell">'+
'<label class="checkbox">'+
'<input type="checkbox">'+
'<i class="icon-checkbox"></i>'+
'</label>'+
'</td>';
cell2.innerHTML = '<td class="label-cell">'+item.name+'</td>';
cell3.innerHTML = '<td class="numeric-cell tablet-only">'+item.price.toFixed(2)+'</td>';
cell4.innerHTML = '<td class="numeric-cell tablet-only">'+
_tempTotal.toFixed(2).toString() +'<div></td>';
},
and i made a call to this function at my mounted() {…}
as follow ,
var items = window.cart_data;
var item = [];
for ( item in items ){
// console.log(items[item]);
if (items[item] !== null) {
self.displayItemRow( items[item] );
}
}
and the table get created properly, but i noticed one strange behavior, that is
if you check my code, in my innerHTML , i put the HTML content with css style
class , i.e. <td class="label-cell"> but when it get created , it only
came out with <td> and my css Style Class gone. only left class which
are “checkbox” or “icon-checkbox” , the rest is like has been striped and left
only standard HTML tag.
Appreciate any input and advice.
Thanks.