Question

我目前在网页设计课程的家庭作业上遇到了问题。这是javascript任务的介绍。分配的关键是计算折旧。我们有输入资产价值，资产寿命和救助价值的字段。还有一个标记为“计算”的按钮，用于运行公式以计算直线折旧，然后生成具有正确结果的表格。我的问题来自多次单击计算按钮。再次单击时，我的程序会在原始页面下方打印更多行，只要您单击“计算”，它就会继续。我想要发生的是，每次点击计算，它都会销毁原始表格，然后重新打印另一个表格。我不知道该怎么做。任何帮助表示赞赏。

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<meta charset="ISO-8859-1">
<title>Homework 4</title>
<script type="text/javascript">
function calculateAndDisplay() {
    var table = document.getElementById("depreciationTable");
    var assetValueInput  = document.getElementById("asset_value").value;
    var assetLifeInput   = document.getElementById("asset_life").value;
    var salvageValueInput = document.getElementById("salvage_value").value;
    var year;
    var assetValue = assetValueInput;
    var assetLife = assetLifeInput;
    var salvageValue = salvageValueInput;

    assetValue = assetValue - salvageValue;
    var depreciation = assetValue / assetLife;
    var accumulatedDepreciation = 0;
    var i;
    for(i=0; i < assetLifeInput; i++){
    year = i + 1;
    assetValue = assetValue - depreciation;
    accumulatedDepreciation = accumulatedDepreciation + depreciation;
    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);
    if (year % 2 === 0){
        cell1.innerHTML = year;
        cell1.style.backgroundColor = "#ADD8E6";
        cell2.innerHTML = parseFloat(Math.round(assetValue * 100) / 100).toFixed(2);
        cell2.style.backgroundColor = "#ADD8E6";
        cell3.innerHTML = parseFloat(Math.round(depreciation * 100) / 100).toFixed(2);
        cell3.style.backgroundColor = "#ADD8E6";
        cell4.innerHTML = parseFloat(Math.round(accumulatedDepreciation * 100) / 100).toFixed(2);
        cell4.style.backgroundColor = "#ADD8E6";
    }else{


    cell1.innerHTML = year;
    cell2.innerHTML = parseFloat(Math.round(assetValue * 100) / 100).toFixed(2);
    cell3.innerHTML = parseFloat(Math.round(depreciation * 100) / 100).toFixed(2);
    cell4.innerHTML = parseFloat(Math.round(accumulatedDepreciation * 100) / 100).toFixed(2);
    }
    }


}
</script>
</head>
<body>
Asset Value: <input id="asset_value" type="text"/>
Asset Life: <input id="asset_life" type="text" />
Salvage Value: <input id="salvage_value" type="text"/>
<button onclick="calculateAndDisplay()">Calculate</button>
<table id="depreciationTable">
  <tr bgcolor= "#00008B">
    <td><font color="white">Year</font></td>
    <td><font color="white">Asset Value</font></td>
    <td><font color="white">Depreciation</font></td>
    <td><font color="white">Accumulated Depreciation</font></td>

  </tr>

</table>
<br>
</body>
</html>

Answer 1

将表包装在带有ID或唯一Class的div中，然后可以使用它来更改innerHTML ...将HTML作为新表;覆盖那里的桌子。

如何在按钮单击上替换表

1 个答案: