如何在表格左侧打印值？答案

【问题标题】：How can I print values to the left of my table?如何在表格左侧打印值？
【发布时间】：2014-04-13 18:31:25
【问题描述】：

我需要将值打印到表格左侧，如下所示：

我知道如何输入变量和文本，只是不确定在哪里插入代码以及如何正确定位。

 <html>
<head>
<title></title>

<script type="text/javascript">

 function fixVal(value,numberOfCharacters,numberOfDecimals,padCharacter) { 
    var i, stringObject, stringLength, numberToPad;            

    value = value * Math.pow(10,numberOfDecimals);                 
    value = Math.round(value);                                   
    stringObject = new String(value);                            
    stringLength = stringObject.length;                          
    while(stringLength < numberOfDecimals + 1) {                     
        stringObject = "0"+stringObject;                    
        stringLength = stringLength+1;                      
    }

    if(numberOfDecimals > 0) {                     
        stringObject = stringObject.substring(0,stringLength-numberOfDecimals)+"."+
        stringObject.substring(stringLength-numberOfDecimals,stringLength);
    }

    if (stringObject.length < numberOfCharacters && numberOfCharacters>0) {
        numberToPad=numberOfCharacters-stringObject.length;      
        for (i=0; i<numberToPad; i=i+1) {
            stringObject=padCharacter+stringObject;
        }
    }

    return stringObject;                                      
}

function buildTable() {

    var amount = parseFloat(document.getElementById("loanAmt").value );
    var monthly = parseInt(document.getElementById("monthlyPay").value );
    var rate = parseFloat(document.getElementById("intRte").value );

    rate = rate / 100 / 12;

    var msg = "<table id='tablefont' border='3' width='65%'>";
    msg += "<tr>";
    msg += "<td>Month</td>";
    msg += "<td>Principal Paid</td>";
    msg += "<td>Interest Paid</td>";
    msg += "<td>Loan Balance</td>";
    msg += "</tr>";

    newPrincipal=amount;
    var m = 1;   //months

    while ( amount > 0 ) {
        var interest = amount * rate;
        var principal = monthly - interest;

        if (principal > amount) {
            principal = amount;
            amount = 0.0;
        } else {
            amount -= principal;
        }

        msg += "<tr><td align='left' bgcolor='pink'>"+m+"</td> \
                <td align='left' bgcolor='pink'>$"+fixVal(principal,0,2,' ')+"</td> \
                <td align='left' bgcolor='pink'>$"+fixVal(interest,0,2,' ')+"</td> \
                <td align='left' bgcolor='pink'>$"+fixVal(amount,0,2,' ')+"</td></tr>";

        m++;
    }


    msg += "</table>";

    document.getElementById("results").innerHTML = msg;


}


</script>

<style type="text/css">

body {
    background: black;
    font-family: arial;
    font-weight: bold;
}

#contentwrap {
    width: 700px;
    margin: 40px auto 0px auto;
    background: #FFFFCC;
    text-align: center;
    border: 6px red solid;
    border-radius: 10px;
    padding: 40px;
}

#tablewrap {
    background-color: lightblue;
    border: 10px pink solid;
}

#tablefont {
    font-weight: bold;
    text-align: center;
}

table {
    border: 5px blue solid;
    background-color: #FFFFCC;
}

#header {
    text-align: center;
    font-size: 2.5em;
    text-shadow: yellow 3px 3px;
    margin-bottom: 18px;
    color: red;
}

#button {
    background: blue;
    color: white;
    cursor: pointer;
    padding: 5px 0px 5px 0px;
    border: 1px solid red;
    border-radius: 25px;
    width: 150px;
}

.contentTitles {
    color: green;
    font-weight: bold;
}

.style {
    background: lightblue;
    font-family: comic sans ms;
    border: 6px blue double;
    color: green;
    font-weight: bold;
}

</style>

</head>

<body>

<div id="contentwrap">

<div id="header">Javascript Loan Calculator</div>

<form>

<div class="contentTitles">Enter Loan Amount<br />
<input type="text" id="loanAmt" class="style"><p />

Interest Rate (%)<br />
<input type="text" id="intRte" class="style"><p /> 

Monthly Payment Amount<br />
<input type="text" id="monthlyPay" class="style"><p />

<div style="margin-top:20px;">
<input type="button" value="Process Data" id="button" onClick="buildTable()">
</div>

</form>

<center>
<div id="results" style="margin-top:20px;"></div>
</center>


</div> <!-- ends div#contentwrap -->

</body>
</html>

【问题讨论】：

尝试制作两个 div。一个用于左侧的值，一个用于表格。然后float:left;
我需要声明另一个变量，因为表使用了 msg 吗？刚试过这个： msg += "
Loan Amount: " + amount +"
";但它不会正常工作
我在想的只是在您的results div 的左侧放置另一个 div，其中包含您想要在表格旁边的详细信息。基本上创建另一个 div 并在其中显示另一条消息，例如 document.getElementById("results_details").innerHTML = results_msg;

标签： javascript html variables html-table output

【解决方案1】：

你可以这样做。
编辑：我认为最好在准备结果的同时准备概述（所以将buildTable重命名为buildResults：

function buildResults() {

（与当前构建表相同）加：

    var msg2 = "";
    msg2 += "Loan Amount: " + document.getElementById("loanAmt").value + "<br>";
    msg2 += "Annual Interest: " + document.getElementById("intRte").value + "<br>";
    msg2 += "Monthly Payment: " + document.getElementById("monthlyPay").value + "<br>";

    document.getElementById("overview").innerHTML = msg2;

更改按钮定义：

<input type="button" value="Process Data" id="button" onClick="buildResults();">

添加一个 div 并将其浮动到 div 的左侧，表格居中：

<div id="overview" style="margin-top:20px;margin-right:20px;float:left;align:left;"></div>

当然，还需要进行一些格式化和清理工作才能使其完全匹配您要查找的内容。

【讨论】：

此方法有效。但是现在我在需要显示正确的值时遇到了公式问题。 var msg2 = ""; msg2 += "Loan Amount: $" + document.getElementById("loanAmt").value + " "; msg2 += "Annual Interest: " + document.getElementById("intRte").value + "%" +" "; msg2 += "Monthly Payment: $" + document.getElementById("monthlyPay").value + " "; msg2 += "Monthly Interest: " + fixVal(interest,0,2,' ') +" "; msg2 += "Months to pay off loan: " +m+" "; msg2 += "Total Interest Paid: $" + " ";
哦，真的，该死的。这有多紧迫？明天我可以用公式回复您，以便将值显示在表格的左侧。
不幸的是，这将在几个小时后到期。似乎无法弄清楚支付的总利息和每月利息的公式。在那之后，我完成了任务。左边的一切都很好，只是我提到的那些值不正确。
好吧，总结每个月的利息金额（在表格中显示每月金额的 while 循环内）。每月利息金额开始较大，并在上个月降至零。您已经计算了每月利息：var interest = amount * rate；有一个复杂的公式可以计算每月的总利息，但你自己可以轻松一点，只需将每个月的利息添加到某个变量中即可。
啊，我明白了。你放了 fixVal(interest, 0, 2, ' ') 但在 while 循环结束时，interest = 0。