javascript - 按下按键时获取特定列的值

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 + " %");
});

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

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>