javascript - 从已填充的单元格中获取总列

我目前有以下代码，当我选择它们各自的表单字段时，我可以在每一行上获得总计1和总计2。整个表处于循环状态。

我被困在如何获取总计2列的总计？

<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();

for (i = 1; i <= 4; i++) {
   if (parseInt(document.getElementById(a + i).value) >= 0) {
       n[i] = parseFloat(document.getElementById(a + i).value);
       rowtotal += n[i];
   }
 }

  document.getElementById(a + 'total').value = n[2] - n[1];
   document.getElementById(a + 'gtotal').value = n[2] - n[1] + n[3] + n[4];
             document.getElementById(a + 'ggtotal').value = n[3] + n[4];

};

        <form action="test.php" method="post">

     <table border="1">
        <tr>
        <td>Time in</td>
        <td>Time out</td>
        <td>Total 1</td>
        <td>Option 1</td>
        <td>Option 2</td>
        <td>Total 2</td>
        </tr>
        <tr>
        <?php



            for ($j = 1; $j <= 3; $j++)
                {

                    ?><td><select name = "time_in" id="<?php echo 'p'.$j.'g1'; ?>" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />

                    <option value = 0>---</option>
                    <option value = 8>08:00</option>
                    <option value = 8.25>08:15</option>
                    <option value = 8.5>08:30</option>

                    </select></td>

                    <td><select name = "time_out" id="<?php echo 'p'.$j.'g2'; ?>" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />

                    <option value = 0>---</option>
                    <option value = 12>12:00</option>
                    <option value = 12.25>12:15</option>
                    <option value = 12.5>12:30</option>
                    <option value = 12.75>12:45</option>

                    </select></td>


                    <td><input name="total_1" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" /></td>
    <td><input type='text' value = "0" name = 'other_1' id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" size = "4" />

    <td><input type='text' value = "0" name = 'other_2' id="<?php echo 'p'.$j.'g4'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" size = "4" />

    <td><input type='text' name = 'total_2' size = '4' id="<?php echo 'p'.$j.'ggtotal'; ?>" ></td>

    </tr><br>

    <?php
        }
        ?>

    <td><input type='text' name = 'grand_total'> Grand total =  </td>
        </table><br>


        </form>

最佳答案

您必须使用html和jquery的类以及每个函数来灵活地完成此操作。

我为你制造了一个小提琴。链接是fiddle link

如果需要在此处添加PHP脚本，则只需在第二个tr中添加循环并进行相应的更改。

更新的HTML：

<table border="1" cellpadding="5" cellspacing="0" width="100%">
  <tr>
    <th>Time in</th>
    <th>Time out</th>
    <th>Total 1</th>
    <th>Option 1</th>
    <th>Option 2</th>
    <th>Total 2</th>
  </tr>
  <tr>
    <td>
      <select name="time_in" class="p1g1 cng">
        <option value='0'>---</option>
        <option value='8'>08:00</option>
        <option value='8.25'>08:15</option>
        <option value='8.5'>08:30</option>
      </select>
    </td>
    <td>
      <select name="time_out" class="p1g2 cng">
        <option value='0'>---</option>
        <option value='12'>12:00</option>
        <option value='12.25'>12:15</option>
        <option value='12.5'>12:30</option>
        <option value='12.75'>12:45</option>
      </select>
    </td>
    <td>
      <input type="text" name="total_1" class="total_1" size = "4"/>
    </td>
    <td>
      <input type='text' value="0" name='other_1' class="other_1 cng" size = "4" />
    </td>
    <td>
      <input type='text' value="0" name='other_2' class="other_2 cng" size="4"/>
    </td>
    <td>
      <input type='text' name='total_2' class="total_2" value="0" size='4' />
    </td>
  </tr>
  <tr>
    <td>
      <select name="time_in" class="p1g1 cng">
        <option value=0>---</option>
        <option value=8>08:00</option>
        <option value=8.25>08:15</option>
        <option value=8.5>08:30</option>
      </select>
    </td>
    <td>
      <select name="time_out" class="p1g2 cng">
        <option value=0>---</option>
        <option value=12>12:00</option>
        <option value=12.25>12:15</option>
        <option value=12.5>12:30</option>
        <option value=12.75>12:45</option>
      </select>
    </td>
    <td>
      <input type="text" name="total_1" class="total_1" size = "4"/>
    </td>
    <td>
      <input type='text' value="0" name='other_1' class="other_1 cng" size = "4" />
    </td>
    <td>
      <input type='text' value="0" name='other_2' class="other_2 cng" size="4"/>
    </td>
    <td>
      <input type='text' name='total_2' class="total_2" value="0" size='4' />
    </td>
  </tr>
  <tr>
    <td>
      <select name="time_in" class="p1g1 cng">
        <option value=0>---</option>
        <option value=8>08:00</option>
        <option value=8.25>08:15</option>
        <option value=8.5>08:30</option>
      </select>
    </td>
    <td>
      <select name="time_out" class="p1g2 cng">
        <option value=0>---</option>
        <option value=12>12:00</option>
        <option value=12.25>12:15</option>
        <option value=12.5>12:30</option>
        <option value=12.75>12:45</option>
      </select>
    </td>
    <td>
      <input type="text" name="total_1" class="total_1" size = "4"/>
    </td>
    <td>
      <input type='text' value="0" name='other_1' class="other_1 cng" size = "4" />
    </td>
    <td>
      <input type='text' value="0" name='other_2' class="other_2 cng" size="4"/>
    </td>
    <td>
      <input type='text' name='total_2' class="total_2" value="0" size='4' />
    </td>
  </tr>
  <tr>
      <td colspan="3"> Grand total =  </td>
      <td colspan="3">
        <input type='text' name='grand_total' class="grand_total" value="0"/>
      </td>
  </tr>
</table>

新的jQuery：

$(function(){
    $(".cng").on("change", function(){
    grand_total = $(".grand_total").val();

    var obj = $(this).closest("tr");
    var p1g1 = obj.find(".p1g1").val();
    var p1g2 = obj.find(".p1g2").val();
    var other_1 = obj.find(".other_1").val();
    var other_2 = obj.find(".other_2").val();

    var total_1 = p1g2 - p1g1;
    obj.find(".total_1").val(total_1);

    var total_2 = total_1 + parseInt(other_1) + parseInt(other_2);
    obj.find(".total_2").val(total_2);

    grand_sum = 0;
    $(".total_2").each(function(){
        grand_sum = parseFloat(grand_sum) + parseFloat($(this).val());
    });
    $(".grand_total").val(grand_sum);
  });
});

关于javascript - 从已填充的单元格中获取总列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36067919/