计算文本框为特定值的数量

时间:2017-10-12 07:55:34

标签: javascript jquery html loops

修改

这么多好的答案,所有这些都有效!非常感谢大家:)我希望我能将所有这些标记为已解决!

----

美好的一天

我们说我有这两个文字输入:

<input type="text" id="plt_quantity_sum"/> <!-- this should calculate the "#quantity" where each "#uom_value" is "PLT" -->
<input type="text" id="crt_quantity_sum"/><!-- this should calculate the "#quantity" where each "#uom_value" is "CRT" -->

让我们假设以下情况:

&#13;
&#13;
<table>
    <tbody>
    <tr>
    <th>Item Name</th>
    <th id="uom_value">UOM</th>
    <th id="qty">Quantity</th>
    </tr>

    <tr>
    <td>Item 1</td>
    <td id="uom_value">PLT</td>
    <td id="qty">5</td>
    </tr>

    <tr>
    <td>Item 2</td>
    <td class="uom_value">PLT</td>
    <td id="qty">3</td>
    </tr>

    <tr>
    <td>Item 3</td>
    <td id="uom_value">CRT</td>
    <td id="qty">2</td>
    </tr>

    <tr>
    <td>Item 4</td>
    <td id="uom_value">CRT</td>
    <td id="qty">3</td>
    </tr>

    </tbody>
    </table>
    
    <input type="text" id="plt_quantity_sum" />
    <input type="text" id="crt_quantity_sum" />
&#13;
&#13;
&#13;

需要做什么:

加载文档时,或通过单击按钮; &#34;#plt_quantity_sum&#34;的数量和#34;#crt_quantity_sum&#34;应根据各自的数量和&#34; UOM&#34;值。

我想到的一些Javascript应该澄清究竟需要发生什么:

$(document).ready(function(){
if (document.getElementById("#uom_value").value == "PLT"){ 

document.getElementById("#plt_quantity_sum").value == (sum of #qty); 

}

else if (document.getElementById("#uom_value").value == "CRT"){

document.getElementById("#crt_quantity_sum").value == (sum of #qty); 

}

});

感谢阅读,我将非常感谢任何帮助。

3 个答案:

答案 0 :(得分:1)

您只需要为两个总和声明两个变量crtQtySumpltQtySum并将它们初始化为0,然后循环tds并检查它是crt还是{ {1}}并相应地更新您的变量:

plt

$(document).ready(function() {
  var crtQtySum = 0;
  var pltQtySum = 0;
  $(".uom_value").each(function() {
    if ($(this).text() === "CRT") {
      crtQtySum += parseInt($(this).next("td.qty").text());
    } else if ($(this).text() === "PLT") {
      pltQtySum += parseInt($(this).next("td.qty").text());
    }
  });
  $("#plt_quantity_sum").val(pltQtySum);
  $("#crt_quantity_sum").val(crtQtySum);
});
$(document).ready(function() {
  var crtQtySum = 0;
  var pltQtySum = 0;
  $(".uom_value").each(function() {
    if ($(this).text() === "CRT") {
      crtQtySum += parseInt($(this).next("td.qty").text());
    } else if ($(this).text() === "PLT") {
      pltQtySum += parseInt($(this).next("td.qty").text());
    }
  });
  $("#plt_quantity_sum").val(pltQtySum);
  $("#crt_quantity_sum").val(crtQtySum);
});

注意:

我在输入中使用了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <th>Item Name</th> <th class="uom_value">UOM</th> <th class="qty">Quantity</th> </tr> <tr> <td>Item 1</td> <td class="uom_value">PLT</td> <td class="qty">5</td> </tr> <tr> <td>Item 2</td> <td class="uom_value">PLT</td> <td class="qty">3</td> </tr> <tr> <td>Item 3</td> <td class="uom_value">CRT</td> <td class="qty">2</td> </tr> <tr> <td>Item 4</td> <td class="uom_value">CRT</td> <td class="qty">3</td> </tr> </tbody> </table> PLT:<input type="text" id="plt_quantity_sum" readonly/></br> CRT:<input type="text" id="crt_quantity_sum" readonly/>属性,因为它们仅用于显示总和,因此无法修改它们,但我们可以像readonly那样使用块元素或div

答案 1 :(得分:1)

这可以使用很多方法来完成,这是其中之一:

$(document).ready(function(){
    var sum_PLT = 0, sum_CRT = 0;
    $('table > tbody  > tr').each(function() {
      tr = $(this)[0];
      cells = tr.cells;
      if(cells[0].textContent != "Item Name"){//To exclude the <th>
         if(cells[1].textContent == "PLT")
           sum_PLT += parseInt(cells[2].textContent);
         else
           sum_CRT += parseInt(cells[2].textContent);
      }
    });
    $("#plt_quantity_sum").val(sum_PLT);
    $("#crt_quantity_sum").val(sum_CRT);
});

这是一个有效的jsFiddle

答案 2 :(得分:1)

您可能想尝试此代码。

<script> 
    $(document).ready(function(){
        var plt_qty = 0;
        var crt_qty = 0;
        $('.uom_value').each(function(){
            if ($(this).text() === 'PLT' ) {
                plt_qty = plt_qty + parseInt($(this).parent().find('.qty').text());
            }else if ($(this).text() === 'CRT' ) {
                crt_qty = crt_qty + parseInt($(this).parent().find('.qty').text());
            }
        });

        $("#plt_quantity_sum").val(plt_qty);
        $("#crt_quantity_sum").val(crt_qty);
    });
</script>

注意:移除uom_value中的课程<th class="uom_value">UOM</th>