Question

我刚刚开始学习javascript，而且我在完成家庭作业问题时遇到了麻烦。问题通过php获得用户输入（输入是预测年数，人口和增长率）。那么javascript应该以（年，人口和变化）的格式生成一个表。

<!doctype html>  
<META HTTPEQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">  
<meta httpequiv="expires" content="0" />  
<html lang="en">  
<head>  
    <title> hw8 </title>  
    <link rel="stylesheet" href="hw8.css">  
    <script src="hw8.js"></script> 
</head>  
<body>  
<form name="inputform"> 
    <div id="input">  
        <h2> Population Growth </h2>  
        Years to forecast: <input type="text" value="<? print $_POST['years']; ?>" name="years"> <br/> <br/>  
        Current Population: <input type="text" value="<? print $_POST['population']; ?>" name="population"> <br/> <br/>  
        Growth Rate: <input type="text" value="<? print $_POST['rate']; ?>" name="rate"> <br/> <br/>  
        <div id="button"> <input type="submit" value="Calculate" id="calc"> </div> 
    </div>  
</form> 

<div id="tables"> 
    <table id="table">
        <tr>
            <th> Year </th> <th> Population </th> <th> Change </th>
        <tr>
            <td> 2017 </td> <td> . </td> <td> . </td> 
        </tr>
    </table>
</div>
</body> 
</html>   
window.addEventListener("load", link_events, false);    
function link_events() { 
    document.getElementById("calc").onclick = calculate;    
}  
function calculate() {  
    var form = document.forms["inputform"];
    var year = 2017;
    var i;
    var years = document.getElementById('years');

    for (i=0; i < years.length; i++){
        year[i]++
    }

    var 
    var change = parseFloat(form)["population"] * (parseFloat(form)["rate"]/100)

Answer 1

我为你准备了一个你想要的结果。

JSFiddle： https://jsfiddle.net/0sfrrewc/

<强>代码：

<!DOCTYPE html>
<html>
<head>
    <title>hw08 demo</title>

    <style type="text/css">
        div#errorContainer {
            max-width: 400px;
            margin-top: 20px;
            border: 1px solid #000;
            background-color: red;
            border-radius: 5px;
            padding: 10px;
        }

        div#errorContainer > span {
            color: white;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {

            /* Calculate click */
            document.getElementById('calculate').addEventListener('click', function() {

                /* Get years */
                var years = parseInt(document.getElementById('years').value);

                if (isNaN(years) || years <= 0) {
                    alert('Invalid year'); return;
                }

                /* Get population */
                var population = parseInt(document.getElementById('population').value);

                if (isNaN(population) || population <= 0) {
                    alert('Invalid population'); return;
                }

                /* Get rate */
                var rate = parseInt(document.getElementById('rate').value);

                if (isNaN(rate) || rate <= 0) {
                    alert('Invalid rate'); return;
                }

                /* Create table */
                var table = '' +
                    '<table>' + 
                        '<thead>' + 
                            '<th><strong>Year</strong></th>' +
                            '<th><strong>Population</strong></th>' +
                            '<th><strong>Change</strong></th>' +
                        '</thead>' +
                '';

                var currentYear = new Date().getFullYear();

                table += '' +
                        '<tbody>' +
                '';

                for (var i = currentYear; i < (currentYear+years); i++) {
                    var change = (population*rate)/100;
                    population += change;

                    table += '' +
                            '<tr>' + 
                                '<td>' + i + '</td>' +
                                '<td>' + population.toFixed() + '</td>' +
                                '<td>' + change.toFixed() + '</td>' + 
                            '</tr>' +
                    '';
                }

                table += '' +
                        '</tbody>' +
                    '</table>' +
                '';

                /* Display table */
                document.getElementById('result').innerHTML = table;
            });
        }

    </script>
</head>
<body>

    <h2>hw08 - Population Growth</h2>

    <br>

    <label for="years">Years to forecast:</label>
    <input type="number" id="years" />

    <br>

    <label for="population">Current Population:</label>
    <input type="number" id="population" />

    <br>

    <label for="rate">Growth Rate:</label>
    <input type="number" id="rate" />

    <br><br>

    <input type="submit" id="calculate" value="Calculate!" />

    <br><br>

    <div id="result"></div>

</body>
</html>

<强>结果：

<强>解释

我们创建一个事件监听器，在单击按钮时触发。然后我们获取必要的数据（年份，人口和费率），然后我们验证数据然后创建表格。我们将整个表存储在变量中，直到生成表为止，然后我们将它放在带有id结果的div中。

编辑：编辑代码，它现在是一个html＆amp;纯粹的JavaScript解决方案。

javaScript动态表

1 个答案: