通过jquery

时间：2016-10-23 12:56:43

标签： javascript jquery

你好我有这样的形式，我需要根据照片计算总数

<table class="table table-bordered table-hover">
  <thead>
    <tr>
        <td></td>
    <td>Heading 0</td>
    <td>Heading 1</td>
    <td>Heading 2</td>
    <td>Heading 3</td>
    <td>Heading 4</td>
    </tr>
    </thead>
    <tbody>
    <tr>
          <td>P 1</td>
      <td><input type="text" name="h[00]" id="00" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[01]" id="01" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[02]" id="02" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[03]" id="03" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[04]" id="04" placeholder="budget" class="med" required=""></td>
<td><div class="total_p0"><input type="text" name="total_p0" value="total p 1"></div></td>
    </tr>
    <tr>
          <td>P 2 </td>

      <td><input type="text" name="h[10]" id="10" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[11]" id="11" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[12]" id="12" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[13]" id="13" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[14]" id="14" placeholder="budget" class="med" required=""></td>
<td><div class="total_p1"><input type="text" name="total_p1" value="total p 2"></div></td>
    </tr>
    <tr>
          <td>P 3 </td>

      <td><input type="text" name="h[20]" id="20" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[21]" id="21" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[22]" id="22" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[23]" id="23" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[24]" id="24" placeholder="budget" class="med" required=""></td>
<td><div class="total_p2"><input type="text" name="total_p2" value="total p 3"></div></td>
    </tr>
    <tr>
          <td>P 4 </td>

      <td><input type="text" name="h[30]" id="30" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[31]" id="31" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[32]" id="32" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[33]" id="33" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[34]" id="34" placeholder="budget" class="med" required=""></td>
<td><div class="total_p3"><input type="text" name="total_p3" value="total p 4"></div></td>
    </tr>
    <tr>
          <td>P 5</td>

      <td><input type="text" name="h[40]" id="40" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[41]" id="41" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[42]" id="42" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[43]" id="43" placeholder="budget" class="med" required=""></td>
      <td><input type="text" name="h[44]" id="44" placeholder="budget" class="med" required=""></td>
<td><div class="total_p4"><input type="text" name="total_p4" value="total p 5"></div></td>
    </tr>
<tr>
  <td></td>
        <td><input type="text" name="total_h0" value="total heading 0"></td>
      <td><input type="text" name="total_h1" value="total heading 1"></td>
      <td><input type="text" name="total_h2" value="total heading 2"></td>
      <td><input type="text" name="total_h3" value="total heading 3"></td>
      <td><input type="text" name="total_h4" value="total heading 4"></td>
      <td><input type="text" name="total_all" value="Total all"></td>
</tr>

    </tbody>
  </table>

总p1，p2，p3，p4，p5为horzintal

和总标题0，标题1，标题2，标题3，标题4

和所有

我试过这样的事情，但我无法完成它

    <script type="text/javascript">
  $(document).ready(function() {
    var partners = 5;
    var headings = 5;
    for (var p = 0; p < partners; p++) {
        for (var i = 0; i < headings; i++) {
          var pi = p+i;
        }
    }
  });
</script>

如图所示

Table

2 个答案:

答案 0 :(得分：0)

<script type="text/javascript">
  $(document).ready(function() {
      $(".med").each(function () {
        $(this).keyup(function () {
            calculateSum();
        });
    });
});
        function calculateSum() {
         var sum = 0;
            //iterate through each textboxes and add the values
            $(".med").each(function () {
                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
            });

            var sumQ = [];
            var headings = 5;

                var sumQ = [];
            for (var i=1; i<=headings; i++) {
                sumQ[i] = 0;
                $('td:nth-child('+(i+1)+')').find(".med").each(function () {
                    if (!isNaN(this.value) && this.value.length != 0) {
                        sumQ[i] += parseFloat(this.value);
                    }
                });
            $("#h"+(i-1)).val(sumQ[i].toFixed(2));

            }

            var sumP = [];
                var partners = 5;

                var sumQ = [];
            for (var i=1; i<=partners; i++) {
                sumP[i] = 0;
                $('tr:eq('+i+')').find(".med").each(function () {
                    if (!isNaN(this.value) && this.value.length != 0) {
                        sumP[i] += parseFloat(this.value);
                    }
                });
            $("#p"+(i-1)).val(sumP[i].toFixed(2));

            }
            $("#sum").val(sum.toFixed(2));
        }
</script>

答案 1 :(得分：0)

我想你想要它像下面这个演示一样？

＆＃13;
＆＃13; 
$(function(){
     $('.med').on('change', function(){

     	  var colIndex = $(this).parent().prevAll().length;
   		  var rowIndex = $(this).closest('tr').prevAll().length;

          var columns = $(this).closest('tr').children('td');
          var colMax = columns.length - 1;
          var rowTotal = 0;

          for (var col = 1; col < colMax; col++) {
              var colData = columns.eq(col).find('input').val();
              if (colData === undefined) {
              	rowTotal += 0;
              } else {
                rowTotal += (1 * colData);
              }
          }


          var rows = $(this).closest('tbody').children('tr');
          var rowMax = rows.length - 1;
          var colTotal = 0;

          for (var row = 0; row < rowMax; row++) {
              var rowData = rows.eq(row).children('td').eq(colIndex).find('input').val();
              if (rowData === undefined) {
                    colTotal += 0;
              } else {
                    colTotal += (1 * rowData);
              }
          }
          $('input[name=total_p' + rowIndex + ']').val(rowTotal);
          $('input[name=total_h' + (colIndex-1) + ']').val(colTotal);

          var totalHead = 0;
          var totalP = 0;
          $('input[name^=total_h]').each(function(){
                var data = isNaN($(this).val())?0:($(this).val() *1);
                totalHead += data;
          });

          $('input[name^=total_p]').each(function(){
                var data = isNaN($(this).val())?0:($(this).val() *1);
                totalP += data;
          });

          var totalall = totalHead + totalP;
          $('input[name=total_all]').val(totalall);
          console.log('total heading = ' + totalHead);
          console.log('total P = ' + totalP);
          console.log('total all = ' + totalall);
     });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <td></td>
            <td>Heading 0</td>
            <td>Heading 1</td>
            <td>Heading 2</td>
            <td>Heading 3</td>
            <td>Heading 4</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>P 1</td>
            <td>
                <input type="text" name="h[00]" id="00" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[01]" id="01" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[02]" id="02" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[03]" id="03" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[04]" id="04" placeholder="budget" class="med" required="">
            </td>
            <td>
                <div class="total_p0">
                    <input type="text" name="total_p0" value="total p 1">
                </div>
            </td>
        </tr>
        <tr>
            <td>P 2 </td>

            <td>
                <input type="text" name="h[10]" id="10" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[11]" id="11" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[12]" id="12" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[13]" id="13" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[14]" id="14" placeholder="budget" class="med" required="">
            </td>
            <td>
                <div class="total_p1">
                    <input type="text" name="total_p1" value="total p 2">
                </div>
            </td>
        </tr>
        <tr>
            <td>P 3 </td>

            <td>
                <input type="text" name="h[20]" id="20" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[21]" id="21" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[22]" id="22" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[23]" id="23" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[24]" id="24" placeholder="budget" class="med" required="">
            </td>
            <td>
                <div class="total_p2">
                    <input type="text" name="total_p2" value="total p 3">
                </div>
            </td>
        </tr>
        <tr>
            <td>P 4 </td>

            <td>
                <input type="text" name="h[30]" id="30" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[31]" id="31" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[32]" id="32" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[33]" id="33" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[34]" id="34" placeholder="budget" class="med" required="">
            </td>
            <td>
                <div class="total_p3">
                    <input type="text" name="total_p3" value="total p 4">
                </div>
            </td>
        </tr>
        <tr>
            <td>P 5</td>

            <td>
                <input type="text" name="h[40]" id="40" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[41]" id="41" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[42]" id="42" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[43]" id="43" placeholder="budget" class="med" required="">
            </td>
            <td>
                <input type="text" name="h[44]" id="44" placeholder="budget" class="med" required="">
            </td>
            <td>
                <div class="total_p4">
                    <input type="text" name="total_p4" value="total p 5">
                </div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="text" name="total_h0" value="total heading 0">
            </td>
            <td>
                <input type="text" name="total_h1" value="total heading 1">
            </td>
            <td>
                <input type="text" name="total_h2" value="total heading 2">
            </td>
            <td>
                <input type="text" name="total_h3" value="total heading 3">
            </td>
            <td>
                <input type="text" name="total_h4" value="total heading 4">
            </td>
            <td>
                <input type="text" name="total_all" value="Total all">
            </td>
        </tr>

    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题