doutang2017 2017-04-08 19:15
浏览 14
已采纳

javaScript动态表[关闭]

I've just started learning javascript and I'm having trouble with a homework problem. The problem gets user input via php (inputs are years to forecast, population, and growth rate). then the javascript should produce a table in the format of (years, population and change).

Example of output

<!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)
  • 写回答

1条回答 默认 最新

  • doudi4014 2017-04-08 19:45
    关注

    I put together an example for you with the result you want.

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

    Code:

    <!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>

    Result:

    result

    Explanation:

    We create a event listener, thats being fired upon clicking the button. Then we fetch the necessary data (year, population and rate), we validate the data then we create the table. We store the entire table in a variable until we are done generating the table, then we place it inside the div with the id result.

    EDIT: Edited the code, it's now a html & pure javascript solution.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法