如何将表单的内容输出到页面中答案

【问题标题】：How do I make the contents of a form output into the page如何将表单的内容输出到页面中
【发布时间】：2015-04-21 22:15:04
【问题描述】：

我正在尝试制作一个显示比赛获胜者的表格。我已经能够打出获胜者的分数，但不能打出那个人的名字。我使用 jquery calx 进行数学计算，但只是说谁是获胜者一直让我发疯。我花了一天的大部分时间试图弄清楚这一点。

这里是代码。

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>

<script src="js/jquery-calx-master/js/numeral.min.js"></script>
  <script src="D:/Catapult Cruzers/web site/js/jquery-calx-master/jquery-1.9.1.min.js"></script>
  <script src="D:/Catapult Cruzers/web site/js/jquery-calx-master/jquery-calx-2.2.0.min.js"></script>
<script>
$(document).ready(function(){
     $('#sheet').calx();
});
</script>
</head>

<body>



                                       <form id="sheet">
Pilot <input data-cell="p1" name="Pilot1">
Run 1    <input   maxlength="5" size="5" type="text" data-cell="A1" />
Run 2    <input  maxlength="5" size="5"  type="text" data-cell="A2" />
Run 3    <input  maxlength="5" size="5" type="text" data-cell="A3" />
  Max  <input  maxlength="5" size="5" type="text" data-cell="A4" data-formula="max(A1:A3)" />
  Ave  <input  maxlength="5" size="5" type="text" data-cell="A5" data-formula="(sum(A1:A3))/3 " data-format="0.000" />
   <br>
  Pilot <input data-cell="p2" name="Pilot2">
Run 1    <input   maxlength="5" size="5" type="text" data-cell="B1" />
Run 2    <input  maxlength="5" size="5"  type="text" data-cell="B2" />
Run 3    <input  maxlength="5" size="5" type="text" data-cell="B3" />
  Max  <input  maxlength="5" size="5" type="text" data-cell="B4" data-formula="max(B1:B3)" />
  Ave  <input  maxlength="5" size="5" type="text" data-cell="B5" data-formula="(sum(B1:B3))/3 " data-format="0.000" />
    <br>
  Pilot <input data-cell="p3" name="Pilot3">
Run 1    <input   maxlength="5" size="5" type="text" data-cell="C1" />
Run 2    <input  maxlength="5" size="5"  type="text" data-cell="C2" />
Run 3    <input  maxlength="5" size="5" type="text" data-cell="C3" />
  Max  <input  maxlength="5" size="5" type="text" data-cell="C4" data-formula="max(C1:C3)" />
  Ave  <input  maxlength="5" size="5" type="text" data-cell="C5" data-formula="(sum(C1:C3))/3 " data-format="0.000" />
    <br>
  Pilot <input data-cell="p4" name="Pilot4">
Run 1    <input   maxlength="5" size="5" type="text" data-cell="D1" />
Run 2    <input  maxlength="5" size="5"  type="text" data-cell="D2" />
Run 3    <input  maxlength="5" size="5" type="text" data-cell="D3" />
  Max  <input  maxlength="5" size="5" type="text" data-cell="D4" data-formula="max(D1:D3)" />
  Ave  <input  maxlength="5" size="5" type="text" data-cell="D5" data-formula="(sum(D1:D3))/3 " data-format="0.000" />
<br><br>

WINNER   <input  maxlength="5" size="5" type="text" data-cell="w1" data-formula="MAX(A4:D4)" data-format="0.000" />



WINNER AVE  <input  maxlength="5" size="5" type="text" data-cell="w2" data-formula="MAX(A5:D5)" data-format="0.000" />

</form>




</body>

</html>

除了获胜者的得分和获胜者 ave（最高平均得分）之外，我希望在得分旁边显示飞行员的姓名（p1、p2、p3、p4）。比如：

赢家 Jimmy 8.52 目前只是赢家 8.52

【问题讨论】：

你为什么要使用表格？
你的 JavaScript 在哪里？
这是为了找出一个赢家。您可以在平板电脑或计算机上使用它。你输入每个参赛者的名字。当他们做飞行时，你投入了时间。它计算出最佳时间。我也想让它找出赢家。不过会有很多超过四个。我只是用四个来解决这个问题。当你有 30 名参赛者时，你想拥有这个。
这是 jquery。我是不是放错地方了？明白，找到分数不是问题。我不知道如何把获胜者的名字写在那里。我没有包括它，因为没有任何效果。

标签： javascript jquery html forms element

【解决方案1】：

克里斯...

我从未使用过 calx 框架，所以我想我会回答，即使它几乎就像我为你做的那样。 calx 的文档不是最好的，但在 GitHub subversion 上有一些示例。

确保将“Pilot”数据单元重命名为大写 P。除此之外，下面的代码应该可以正常工作。

如果您从这篇文章中删除任何内容，请至少考虑以下内容..

拥有更简洁的代码，适当的缩进创造了一个可读性更好的世界
当您在 Stack 上发帖时，您应该确保您阅读并重新阅读您所写的所有内容。（你所拥有的相当混乱）

玩得开心，并确保您声明我回答了这个问题！

<!DOCTYPE HTML>

<html>
<head>

    <title>Untitled</title>

    <script src="js/jquery-calx-master/js/numeral.min.js"></script>
    <script src="D:/Catapult Cruzers/web site/js/jquery-calx-master/jquery-1.9.1.min.js"></script>
    <script src="D:/Catapult Cruzers/web site/js/jquery-calx-master/jquery-calx-2.2.0.min.js"></script>


</head>

<script>

    var max_user_cell = "D";

    $(document).ready(function(){
         $('#sheet').calx();
    });

    function getWinner()
    {
        var sheet = $('#sheet').calx('getSheet')
        var avg_array = new Array();
        var results = document.getElementById('results');
        var winner;
        var highest_avg;

        var count = 0;
        var cell_letter = "A";
        while(count < 4)
        {
            avg_array[count] = sheet.evaluate('(sum(' + cell_letter + '1:' + cell_letter + '3))/3');
            cell_letter = nextChar(cell_letter);
            count++;
        }

        highest_avg = Math.max.apply(Math, avg_array);
        winner = avg_array.indexOf(highest_avg);
        winner++;

        results.innerHTML = sheet.getCellValue('P' + winner) + " is the winner with a time of " + highest_avg.toFixed(2);
    }


    function nextChar(c)
    {
        return String.fromCharCode(c.charCodeAt(0) + 1);
    }

</script>

<body>


<form id="sheet" onchange="getWinner()">

    Pilot <input data-cell="P1" name="Pilot1">
        Run 1    <input   maxlength="5" size="5" type="text" data-cell="A1" />
        Run 2    <input  maxlength="5" size="5"  type="text" data-cell="A2" />
        Run 3    <input  maxlength="5" size="5" type="text" data-cell="A3" />
        Max  <input  maxlength="5" size="5" type="text" data-cell="A4" data-formula="max(A1:A3)" />
        Ave  <input  maxlength="5" size="5" type="text" data-cell="A5" data-formula="(sum(A1:A3))/3 " data-format="0.000" />

    <br>

    Pilot <input data-cell="P2" name="Pilot2">
        Run 1    <input   maxlength="5" size="5" type="text" data-cell="B1" />
        Run 2    <input  maxlength="5" size="5"  type="text" data-cell="B2" />
        Run 3    <input  maxlength="5" size="5" type="text" data-cell="B3" />
        Max  <input  maxlength="5" size="5" type="text" data-cell="B4" data-formula="max(B1:B3)" />
        Ave  <input  maxlength="5" size="5" type="text" data-cell="B5" data-formula="(sum(B1:B3))/3 " data-format="0.000" />

    <br>

    Pilot <input data-cell="P3" name="Pilot3">
        Run 1    <input   maxlength="5" size="5" type="text" data-cell="C1" />
        Run 2    <input  maxlength="5" size="5"  type="text" data-cell="C2" />
        Run 3    <input  maxlength="5" size="5" type="text" data-cell="C3" />
        Max  <input  maxlength="5" size="5" type="text" data-cell="C4" data-formula="max(C1:C3)" />
        Ave  <input  maxlength="5" size="5" type="text" data-cell="C5" data-formula="(sum(C1:C3))/3 " data-format="0.000" />

    <br>

    Pilot <input data-cell="P4" name="Pilot4">
        Run 1    <input   maxlength="5" size="5" type="text" data-cell="D1" />
        Run 2    <input  maxlength="5" size="5"  type="text" data-cell="D2" />
        Run 3    <input  maxlength="5" size="5" type="text" data-cell="D3" />
        Max  <input  maxlength="5" size="5" type="text" data-cell="D4" data-formula="max(D1:D3)" />
        Ave  <input  maxlength="5" size="5" type="text" data-cell="D5" data-formula="(sum(D1:D3))/3 " data-format="0.000" />

    <br>
    <br>

    WINNER   <input  maxlength="5" size="5" type="text" data-cell="w1" data-formula="MAX(A4:D4)" data-format="0.000" />

    WINNER AVE  <input  maxlength="5" size="5" type="text" data-cell="w2" data-formula="MAX(A5:D5)" data-format="0.000" />

    <br>
    <br>

    <span id="results"></span>

</form>


</body>

</html>

【讨论】：

酷！谢谢你的帮助！像冠军一样工作。