javascript - 在按键上获取特定列的值

我现在有这张表，当我单击2时我应该得到总列值之和，例如4，并且当我键入成就任何列输入时我应该得到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 + " %");
});

我很累，我不仅能够获取整个表的值，而且不能在我的代码中获得按键上的特定列，我也可以获得按键上的所有总列和当前列

最佳答案

使用一个对每一列保持总计的对象。

当$('#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>