Question

我是新来的，试图通过学习和练习来自学JavaScript。但我现在被困住了。

我的小项目在工作。矩阵计算器在Web浏览器上脱机工作。

有一个矩阵（15列10行），每个单元格都有指定的值。

在每行的末尾必须显示所选复选框值的总和。

然后必须从前5行找到最高的总和值，并将其添加到接下来的5行的总和中。

总和必须显示在下面。

某些单元格还分配了Note（有4种不同的注释），如果选中此复选框，则必须在下面显示。（html中ID分配的不同注释）

我所拥有的是HTML代码

<div>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="A15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedA"></p></li>
</ul>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="B15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedB"></p></li>
</ul>
<ul>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C1" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C2" value="1" id="noteA"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C3" value="1" id="noteB"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C4" value="1" id="noteC"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C5" value="1" id="noteD"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><input type="checkbox" name="C15" value="1" id="none"> </li>
    <li style="display: inline-block; border: 1px solid blue; width: 20px; height: 20px;"><p id="sumSelectedC"></p></li>
</ul>
<ul>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X1" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X2" value="1" id="noteA"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X3" value="1" id="noteB"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X4" value="1" id="noteC"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X5" value="1" id="noteD"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="X15" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><p id="sumSelectedX"></p></li>
</ul>
<ul>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z1" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z2" value="1" id="noteA"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z3" value="1" id="noteB"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z4" value="1" id="noteC"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z5" value="1" id="noteD"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><input type="checkbox" name="Z15" value="1" id="none"> </li>
  <li style="display: inline-block; border: 1px solid red; width: 20px; height: 20px;"><p id="sumSelectedZ"></p></li>
</ul>
<ul>
    <p id="totalSum"></p><!-- Sum of HigheSt number from sumSelectedA to sumSelectedC and all other sumSelected -->
</ul>
<ul>
    <p id="noteInfo"></p><!-- Display all Notes if checkbox with id="NoteA and/or B and/or C and/or D" selected-->
</ul>

我的想法是使用10个函数来计算每一行，然后下一个函数从前五行找到最高值，然后将最高值添加到所有其他行和值。这可能是非常简单和很多代码，但对我来说它是可以的（将脱机工作，并将有一些练习）。如果有更短的内容我会很感激，如果你可以在评论中发表。

但对我来说真正的问题是显示Notes。如何显示多个音符，我应该在哪里放置音符文本以及如何防止显示多个时间相同的音符（假设有2个ID为＆＃34的复选框; NoteA＆＃34;被选中）

你不必让我准备好使用解决方案，某些方向也会起作用。或许对这个小项目有一种完全不同的方法。

干杯中号

Answer 1

你已经说过用了什么：

http://api.jquery.com/jquery.each/

我假设你在页面中包含了jQuery api：

// THis you must change to make easy in jquery
<input type="checkbox" name="A15" value="1" id="none" data-target="#sumSelectedA">

<script type="text/javascript">

var obj = $('input');

jQuery.each( obj, function( i, val ) {
    var target = i.attr('data-target');
    var qtd = i.val();

    var ammount = $(target).text();
    var total = parseInt(ammount)+qtd;
    target.html(total);

    alert("Sumatory in "+target+" is: "+total);

});

</script>

然后你可以创建一个val来对所有值求和，并选择最高值。

<script type="text/javascript">

var highest = 0;

// inside .each
if(qtd > highest){
    highest = qtd;
}

</script>

JavaScript表格的复选框 - 如何添加值并找到最高值？

1 个答案: