獲取有關按鍵特定列的值

Question

我現在有這個表，當我點擊2我應該得到總列值之和像4，當我在成績KEYUP任何列輸入我應該得到的10現在

<table class="table-bordered alert alert-warning"> 
         <tbody id="assigned_indicators"> 
         <tr class="indicator_title"> 
          <td><strong><em>Indicators Selected</strong></em></td> 
          <td><strong><em>Assign Weightage(%)</em></strong></td> 
          <td style="color:#0F4C8F"><strong><em>Achievement 100% per <br/>indicator(%)</em></strong></td> 
         </tr> 


           <tr id="indicator_2" class="indicator_body"> 
            <td>Indicator 2</td> 
            <td><input type="number" name="task[indicators][2]" 
               value=""> 
            </td> 
            <td style="color:#0F4C8F"><input type="number" name="task[achieved][2]" ?>"></td>         <!--            value=""></td>--> 
           </tr> 

            <tr id="indicator_1" class="indicator_body"> 
            <td>Indicator 2</td> 
            <td><input type="number" name="task[indicators][1]" 
               value=""> 
            </td> 
            <td style="color:#0F4C8F"><input type="number" name="task[achieved][1]" ?>"></td>         <!--            value=""></td>--> 
           </tr> 

         <tr class="indicator_total"> 
          <td><em><strong>Total: </strong></em></td> 
          <td id="indicator_total_value"> 
          </td> 
          <td id="achievement_total_value">100%</td> 
         </tr> 
         </tbody> 
        </table> 

我的javascript代碼，我已經試過到目前爲止

$("#assigned_indicators ").on("keyup", "input[type='number']", function (event, value) { 
    var colCount = 0; 
    var totalWeightage = 0; 
    //this counts the total column 
    $('#assigned_indicators tr:nth-child(1) td').each(function() { 
     if ($(this).attr('colspan')) { 
      colCount += +$(this).attr('colspan'); 
     } else { 
      colCount++; 
     } 
    }); 

     var colIndex = $(this).parent().children().index($(this)); 
     console.log(colIndex); 
     $("#assigned_indicators input[type='number']").each(function() { 
      if ($(this).val() != "") 
       totalWeightage += parseInt($(this).val()); 
     }); 
     console.log(colIndex); 


    //add the sum values 
    if (totalWeightage > 100) 
     $("#indicator_total_value").html("<span class='red'>error: percent greater than 100</span>"); 
    else 
     $("#indicator_total_value").text(totalWeightage + " %"); 
}); 

我累了，我不只是能得到keypre整個表的價值，但沒有特定的列SS在我的代碼我得到所有總列和按鍵上的當前列還

Answer 1

使用一個對象，爲每列保留一個單獨的總計。

你也有$('#indicator_total td')當它應該是$('.indicator_total td')，因爲indicator_total是一個類，而不是一個ID。

$("#assigned_indicators ").on("keyup", "input[type='number']", function(event, value) { 
 
    var totalWeightage = {}; 
 
    $('#assigned_indicators tr td input[type=number]').each(function() { 
 
    var colIndex = $(this).parent().index(); 
 
    if (!(colIndex in totalWeightage)) { 
 
     totalWeightage[colIndex] = 0; 
 
    } 
 
    var input = parseInt($(this).val(), 10); 
 
    if (input) { 
 
     totalWeightage[colIndex] += input; 
 
    } 
 
    }); 
 

 
    $.each(totalWeightage, function(i, total) { 
 
    if (total > 100) { 
 
     $('.indicator_total td').eq(i).html("<span class='red'>error: percent greater than 100</span>"); 
 
    } else { 
 
     $('.indicator_total td').eq(i).text(total + ' %'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="table-bordered alert alert-warning"> 
 
    <tbody id="assigned_indicators"> 
 
    <tr class="indicator_title"> 
 
     <td><strong><em>Indicators Selected</strong> 
 
     </em> 
 
     </td> 
 
     <td><strong><em>Assign Weightage(%)</em></strong> 
 
     </td> 
 
     <td style="color:#0F4C8F"><strong><em>Achievement 100% per <br/>indicator(%)</em></strong> 
 
     </td> 
 
    </tr> 
 

 

 
    <tr id="indicator_2" class="indicator_body"> 
 
     <td>Indicator 2</td> 
 
     <td> 
 
     <input type="number" name="task[indicators][2]" value=""> 
 
     </td> 
 
     <td style="color:#0F4C8F"> 
 
     <input type="number" name="task[achieved][2]" ?>"></td> 
 
     <!--            value=""></td>--> 
 
    </tr> 
 

 
    <tr id="indicator_1" class="indicator_body"> 
 
     <td>Indicator 2</td> 
 
     <td> 
 
     <input type="number" name="task[indicators][1]" value=""> 
 
     </td> 
 
     <td style="color:#0F4C8F"> 
 
     <input type="number" name="task[achieved][1]" ?>"></td> 
 
     <!--            value=""></td>--> 
 
    </tr> 
 

 
    <tr class="indicator_total"> 
 
     <td><em><strong>Total: </strong></em> 
 
     </td> 
 
     <td id="indicator_total_value"> 
 
     </td> 
 
     <td id="achievement_total_value">100%</td> 
 
    </tr> 
 
    </tbody> 
 
</table>