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

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

javascript jquery html forms

Javascript 如何将表单内容输出到页面中,javascript,jquery,html,forms,element,Javascript,Jquery,Html,Forms,Element,我正在制作一张表格，显示比赛的获胜者。我能给获胜者打分，但不能说出那个人的名字。我使用jquery计算器来计算，但仅仅说谁是赢家就让我发疯了。我花了一天的大部分时间想弄明白这一点这是代码 <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <script src="js/jquery-calx-master/js/numeral.min.js"><

我正在制作一张表格，显示比赛的获胜者。我能给获胜者打分，但不能说出那个人的名字。我使用jquery计算器来计算，但仅仅说谁是赢家就让我发疯了。我花了一天的大部分时间想弄明白这一点

这是代码

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


无标题
$（文档）.ready（函数（）{
$（'#sheet'）.calx（）；
});
领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道



赢家
温纳大街

除了获胜者的分数和获胜者的平均分（最高平均分），我希望飞行员的名字（p1、p2、p3、p4）与分数一起显示。比如：

冠军吉米8.52，因为它现在是冠军8.52，克里斯

我从来没有使用过calx框架，所以我想我会回答这个问题，尽管它几乎和我为你做的一样。calx的文档不是最好的，但是GitHub subversion上有一些示例

确保将“Pilot”数据单元格重命名为大写的p。除此之外，下面的代码应该适合您

如果你从这个帖子中拿走任何东西，请至少考虑下面的……/P>

如果代码更清晰，适当的缩进将创建一个可读性更好的世界
当你们在堆栈上发帖时，你们应该确保你们读了又读了你们写的所有东西。（你所拥有的相当令人困惑）

祝你玩得开心，确保你宣布我回答了这个问题

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


无标题
var max_user_cell=“D”；
$（文档）.ready（函数（）{
$（'#sheet'）.calx（）；
});
函数getWinner（）
{
var sheet=$（'#sheet'）.calx（'getSheet'））
var avg_array=新数组（）；
var results=document.getElementById（'results'）；
var赢家；
var最高平均值；
var计数=0；
变量单元格字母=“A”；
而（计数<4）
{
avg_数组[count]=sheet.evaluate（‘（和（‘+单元格字母+’1:‘+单元格字母+’3））/3’；
单元格字母=nextChar（单元格字母）；
计数++；
}
最高平均=Math.max.apply（数学，平均数组）；
winner=平均数组.indexOf（最高平均值）；
优胜者++；
results.innerHTML=sheet.getCellValue（'P'+winner）+“是时间为“+最高平均toFixed（2）”的获胜者；
}
功能nextChar（c）
{
返回字符串.fromCharCode（c.charCodeAt（0）+1）；
}
领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道


领航员
运行1
运行2
运行3
马克斯
大道




赢家
温纳大街

你为什么要使用表单？你的JavaScript在哪里？这是为了找出赢家。你可以在平板电脑或电脑上使用它。你输入每个参赛者的名字。当他们做一次飞行时，你投入了时间。它会找出最佳时间。我还想让它找出赢家。不过，将有远远不止四个。我只是用四个来解决这个问题。当你有30名参赛者时，你想要这个。这是jquery。我放错地方了吗？要知道，找到分数不是问题。我不知道怎么把获胜者的名字放在那里。我没有把它包括进去，因为什么都没用。酷！谢谢你的帮助！像冠军一样工作。