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

Question

我正在尝试制作一个表格来显示比赛的获胜者。我已经能够得出获胜者的分数，但不能得出那个人的名字。我使用 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>

连同获胜者的分数和获胜者平均分数（最高平均分数）我希望飞行员的名字（p1、p2、p3、p4）与分数一起显示。类似于：

Winner Jimmy 8.52 目前只有 Winner 8.52

Answer 1

克里斯...

我从未使用过 calx 框架，所以我想我会回答，即使它几乎是我为您所做的一切。 calx 的文档不是最好的，但是 GitHub 颠覆中有一些示例。

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

如果您对此有任何看法post，请至少考虑以下内容..

拥有更简洁的代码，适当的缩进创造了一个更易读的世界
当你在 Stack 上 post 时，你应该确保你阅读并重新阅读你写的所有内容。（你有什么比较混乱）

祝您玩得愉快，并确保您宣布我在回答问题！

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

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

How do I make the contents of a form output into the page

html

javascript

forms

jquery

element