目前我使用javascript创建了一个表,并在其上设置了一些值。现在我用用户输入更改总价格的值。 例如,我为标准包装2,它的总价格将变为8,000.00,子总计和总计将自动更改。 有人可以指导我吗? TQ
这是代码的打印屏幕。
这是我的代码
function capacityMaintenance() {
var tab = document.createElement('table');
tab.id = 'capacityTable';
tab.style.paddingBottom = '10px';
tab.style.margin = '2% auto 0';
tab.style.width = '50%';
tab.classname = "cssTable";
var tbo = document.createElement('tbody');
var title, No, titleItemDesc, titlequantity, titleUnitPrice, titleTotalPrice, row;
title = document.createElement('tr');
title.className = "cssSubTitleC";
No = document.createElement('td');
titleItemDesc = document.createElement('td');
titlequantity = document.createElement('td');
titleUnitPrice = document.createElement('td');
titleTotalPrice = document.createElement('td');
No.style.width = '30px';
titleItemDesc.style.width = '500px';
titlequantity.style.width = '375px';
titleUnitPrice.style.width = '500px';
titleTotalPrice.style.width = '500px';
No.appendChild(document.createTextNode('No'));
titleItemDesc.appendChild(document.createTextNode('Item Description'));
titlequantity.appendChild(document.createTextNode('Quantity'));
titleUnitPrice.appendChild(document.createTextNode('Unit Price (MYR)'));
titleTotalPrice.appendChild(document.createTextNode('Total Price (MYR)'));
title.appendChild(No);
title.appendChild(titleItemDesc);
title.appendChild(titlequantity);
title.appendChild(titleUnitPrice);
title.appendChild(titleTotalPrice);
tbo.appendChild(title);
var standardFontSize = "10pt";
var standardFontFamily = "Verdana, Arial, Helvetica, sans-serif";
for (var i = 1; i < 6; i++) {
var inputbox_Quantity = new Array(6);
var inputbox_GrandToTal = new Array(6);
var page = #this.pageName#
var value_Sun = page.fields.STANDARD.getValue();
var value_Mon = page.fields.ADDITIONAL.getValue();
var value_Tue = page.fields.SUBTOTAL.getValue();
var value_Wed = page.fields.GST.getValue();
var value_Thur = page.fields.GRANDTOTAL.getValue();
var value_Quantity = "";
var value_Price = "";
var value_Total = "";
if (i == 1) {
var Sun_Value = value_Sun.split(",");
for (j = 0; j < Sun_Value.length; j++) {
if (j == 1) {
value_Quantity = Sun_Value[j];
} else if (j == 3) {
value_Total = Sun_Value[j];
}
}
} else if (i == 2) {
var Mon_Value = value_Mon.split(",");
for (j = 0; j < Mon_Value.length; j++) {
if (j == 1) {
value_Quantity = Mon_Value[j];
} else if (j == 3) {
value_Total = Mon_Value[j];
}
}
} else if (i == 3) {
var Tue_Value = value_Tue.split(",");
for (j = 0; j < Tue_Value.length; j++) {
if (j == 3) {
value_Total = Tue_Value[j];
}
}
} else if (i == 4) {
var Wed_Value = value_Wed.split(",");
for (j = 0; j < Tue_Value.length; j++) {
if (j == 3) {
value_Total = Wed_Value[j];
}
}
} else if (i == 5) {
var Thur_Value = value_Thur.split(",");
for (j = 0; j < Thur_Value.length; j++) {
if (j == 3) {
value_Total = Thur_Value[j];
}
}
}
row = document.createElement('tr');
row.className = i % 2 ? "cssLine2C" : "cssLine1C";
No = document.createElement('td');
No.setAttribute('style', 'font-weight: bold');
No.style.fontFamily = standardFontFamily;
No.style.fontSize = standardFontSize;
titleItemDesc = document.createElement('td');
titleItemDesc.setAttribute('style', 'font-weight: bold');
titleItemDesc.style.fontFamily = standardFontFamily;
titleItemDesc.style.fontSize = standardFontSize;
titlequantity = document.createElement('td');
titlequantity.style.textAlign = "center";
titleUnitPrice = document.createElement('td');
titleUnitPrice.setAttribute('style', 'font-weight: bold');
titleUnitPrice.style.fontFamily = standardFontFamily;
titleUnitPrice.style.fontSize = standardFontSize;
titleUnitPrice.style.textAlign = "right";
titleTotalPrice = document.createElement('td');
titleTotalPrice.setAttribute('style', 'font-weight: bold');
titleTotalPrice.style.fontFamily = standardFontFamily;
titleTotalPrice.style.fontSize = standardFontSize;
titleTotalPrice.style.textAlign = "right";
if (i == 1) {
value_Price = 4000;
value_Price1 = value_Price.toLocaleString('en-US', {
minimumFractionDigits: 2
});
No.appendChild(document.createTextNode('1'));
titleItemDesc.appendChild(document.createTextNode('Standard Package'));
titleUnitPrice.appendChild(document.createTextNode(value_Price1));
inputbox_Quantity[i] = document.createElement('input');
inputbox_Quantity[i].type = "number";
inputbox_Quantity[i].setAttribute('maxlength', '2');
inputbox_Quantity[i].style.fontFamily = standardFontFamily;
inputbox_Quantity[i].style.fontSize = standardFontSize;
inputbox_Quantity[i].style.width = "40%";
inputbox_Quantity[i].id = "inputbox_Quantity" + i;
if (value_Quantity == '') {
inputbox_Quantity[i].value = 0;
titlequantity.appendChild(inputbox_Quantity[i]);
} else {
inputbox_Quantity[i].value = value_Quantity;
titlequantity.appendChild(inputbox_Quantity[i]);
}
var quantity = inputbox_Quantity[i].value;
var Price = value_Price;
var total = quantity * Price;
total = total.toLocaleString('en-US', {
minimumFractionDigits: 2
})
titleTotalPrice.appendChild(document.createTextNode(total));
} else if (i == 2) {
value_Price = 2000;
value_Price2 = value_Price.toLocaleString('en-US', {
minimumFractionDigits: 2
});
No.appendChild(document.createTextNode('2'));
titleItemDesc.appendChild(document.createTextNode('Aditional Package'));
titleUnitPrice.appendChild(document.createTextNode(value_Price2));
inputbox_Quantity[i] = document.createElement('input');
inputbox_Quantity[i].type = "number";
inputbox_Quantity[i].setAttribute('maxlength', '2');
inputbox_Quantity[i].style.fontFamily = standardFontFamily;
inputbox_Quantity[i].style.fontSize = standardFontSize;
inputbox_Quantity[i].style.width = "40%";
inputbox_Quantity[i].id = "inputbox_Quantity" + i;
if (value_Quantity == '') {
inputbox_Quantity[i].value = 0;
titlequantity.appendChild(inputbox_Quantity[i]);
} else {
inputbox_Quantity[i].value = value_Quantity;
titlequantity.appendChild(inputbox_Quantity[i]);
}
var quantity = inputbox_Quantity[i].value;
var Price = value_Price;
var total = quantity * Price;
total = total.toLocaleString('en-US', {
minimumFractionDigits: 2
})
titleTotalPrice.appendChild(document.createTextNode(total));
} else if (i == 3) {
titleUnitPrice.appendChild(document.createTextNode('Sub Total'));
} else if (i == 4) {
titleUnitPrice.appendChild(document.createTextNode('GST'));
<!--- titleTotalPrice.appendChild(document.createTextNode('240.00')); --->
} else if (i == 5) {
titleUnitPrice.appendChild(document.createTextNode('Grand Total (RM)'));
};
//second column text box
<!--- inputbox_ManHour[i] = document.createElement('input');
inputbox_ManHour[i].type = "Text";
inputbox_ManHour[i].setAttribute('maxlength', '10');
inputbox_ManHour[i].style.fontFamily = standardFontFamily;
inputbox_ManHour[i].style.fontSize = standardFontSize;
inputbox_ManHour[i].id = "inputbox_ManHour" + i;
inputbox_ManHour[i].value = value_ManHr;
titlequantity.appendChild(inputbox_ManHour[i]);
--- >
<!--- //fourth column text box
inputbox_TimeEnd[i] = document.createElement('input');
inputbox_TimeEnd[i].type = "Text";
inputbox_TimeEnd[i].setAttribute('maxlength', '5');
inputbox_TimeEnd[i].style.fontFamily = standardFontFamily;
inputbox_TimeEnd[i].style.fontSize = standardFontSize;
inputbox_TimeEnd[i].id = "inputbox_TimeEnd" + i;
inputbox_TimeEnd[i].value = value_EndTime;
//attach_calendar(inputbox_TimeEnd[i], 'images/', 'Select Date');
titleTotalPrice.appendChild(inputbox_TimeEnd[i]);
--- >
tbo.appendChild(row);
row.appendChild(No);
row.appendChild(titleItemDesc);
row.appendChild(titlequantity);
row.appendChild(titleUnitPrice);
row.appendChild(titleTotalPrice);
}
tab.appendChild(tbo);
document.getElementById('content').appendChild(tab);
}