在按键上获取特定列的值

Question

我现在有了这个表，当我点击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 + " %");
});

我很累，而且我不仅能够获得整个表的价值，而且我的代码中没有关于按键的特定列我在keypress上获得所有总列和当前列

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>