從已填充的單元格中獲取總列數

Question

我目前有以下代碼，可以在每行中選擇總計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> 

Answer 1

你必須使用類和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); 
    }); 
});