显示在文本框中输入的值列表答案

【问题标题】：Display a list of values entered in a text box显示在文本框中输入的值列表
【发布时间】：2015-07-25 16:23:06
【问题描述】：

我想在每次点击“转换”按钮时获取所有转换后的值。

   <!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8" />
    <title>Temperature Conversion</title>


    <style type="text/css">

    body
    {
        font: 1em calibri, arial;
    }
    button
    {
        background-color: transparent;
        margin: 5px;
        width: 300px;
    }
    h1, h2, h3, h4
    {
        text-align: center;
    }
    table
    {
        border: 8px double;
        margin-left: auto;
        margin-right: auto;
        padding: 2px;
        height: 500px;
        width: 30%;
    }
    td
    {
        border: 1px solid;
    }
    td#topcell
    {
        height: 200px;
        text-align: center; 
        vertical-align: middle;
    }
    td#midcell
    {
        height: 200px;
        text-align: center; 
        vertical-align: middle;
    }
    td#bottomcell
    {
        text-align: center; 
    }

    </style>

    <script type="text/javascript">

    function convertTemp() 
    {

        var c = document.getElementById('ctemp'), f = document.getElementById('ftemp');
        c.value = Math.round((f.value - 32) * 5 / 9);
        lblResult.innerHTML = c.value;
        document.getElementById("Fdegree").innerHTML = f.value;
        f.value = '';
                var list = [];
            var clist = [];            
                var str = document.getElementById("ftemp");
                list.push(str.value);
        clist.push(c.value);
                str.value = "";
                str.focus();
                var area = document.getElementById("txtArea");
                area.value = "";
                for (var i = 0; i < list.length; i++) {
                    area.value += list[i] + "\n";
                }
            for (var i = 0; i < clist.length; i++) {
                    area.value += clist[i] + "\n";
                }
            }
    </script>
</head>
<body>
    <main role="main">
            <table>
                <tr>
                    <td id="topcell">
                        <label for="Fahrenheit">Fahrenheit:</label>&nbsp;&nbsp;&nbsp;<input id="ftemp"><br />
                        <br />
                        <label for="Celcius">Celcius:</label>&nbsp;&nbsp;&nbsp;<input id="ctemp">&nbsp;&nbsp;&nbsp;
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Fahrenheit&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Celcius                   
                    </td>
                </tr>
                <tr>
                    <td id="midcell">
                    <br />
                        <textarea rows="5" id="txtArea">
                        <p id="Fdegree"></p>
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td id="bottomcell">
                        <input type="button" value="Convert" onclick="convertTemp()" />

                    </td>
                </tr>
            </table>
    </main>
</body>
</html>

这些值应在华氏和摄氏度下的中间部分逐行适当地显示。

这是期望的结果：http://i61.tinypic.com/16atyc5.jpg

【问题讨论】：

我不清楚你的目标。您的目标是保留以前转换的值，然后附加新的转换，以便记录每次转换吗？
除此之外，超出您的问题范围：我会考虑使用 CSS 填充而不是 &nbsp;、divs 作为您的整体布局，然后使用 table 和 @987654326 @ 对于每个“华氏度”和“摄氏度”值。这将更容易控制，因为您的演示文稿不会那么依赖于您的标记。
对不起。我对我真正想要实现的目标还不够清楚。我用一个链接更新了我的帖子，以描述预期的结果。
我想出了一种方法来将输入到 2 个文本框中的所有值存储在一个数组中。但不确定如何在点击转换后显示全部

标签： javascript

【解决方案1】：

您必须动态地为包含协调数据的表创建 TR TD。

var table = document.getElementById("myTable");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";

【讨论】：