时间戳

首页 > 解决方案 > 使用 Javascript 在动态添加删除行中计算行值和列值

javascript - 使用 Javascript 在动态添加删除行中计算行值和列值

问题描述

我正在尝试使用 JS 执行以下功能。我已经达到了参与者总和的总数，但是当我动态添加行时它不起作用。它仅在我仅更改第一行时生效。

  1. 参加人数 * 每名参加者的补贴 = 总培训价值
  2. 总分配值中的总培训值列总和

此外，我不知道如何获得每行的总训练值和总训练值的总和。你能在这方面帮助我，这样我就可以完成我开始的事情。

//Dynamic Add Delete Rows
$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    $('#addr' + i).html("<td>" + (i + 1) + "</td><td><select class='form-control' required name='topic[" + i + "]'><option selected disabled value=''>Select Topic</option><option value='1'>Topic 1</option></select></td><td><input  name='alloc_trainig[" + i + "]' type='text' placeholder='Allocated Trainings' class='form-control input-md'></td><td><input  name='add_traing[" + i + "]' type='text' placeholder='Additional Trainings (if Any)'  class='form-control'></td><td><input  name='no_patycpnt[" + i + "]' id='no_patycpnt' type='text' placeholder='No. of Participants'  class='Participants form-control input-md'></td><td><input  name='prosd_days[" + i + "]' type='text' placeholder='Proposed Days'  class='form-control input-md'></td><td><input  name='subsify_per_patrcpnt[" + i + "]' type='text' placeholder='Subsidy Per Participant' class='Subsidy form-control input-md'></td><td><input type='text' name='total_value[" + i + "]' id='total_value' placeholder='Total Value' readonly class='form-control'/></td>");

    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    i++;
  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
  });

});

//Calculation Code

$(".Participants").change(function() {
  var sum = 0;
  $('.Participants').each(function(i, obj) {


    if ($.isNumeric(this.value)) {
      sum += parseFloat(this.value);
    }

  })
  $('#contrctval').val(sum);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style type="text/css">
    input {
      background-color: transparent;
      border: 0px solid;
      height: 40px;
      width: 160px;
    }
  </style>
  <style type="text/css">
    select {
      background-color: transparent;
      border: 0px solid;
      height: 20px;
      width: 160px;
    }
  </style>

</head>

<body>
  <div id="wrapper">
    <!-- Page Content -->
    <div id="page-wrapper">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <h3 class="page-header">Plan Outsourced Training (OST) Budget</h3>
            <!-- pre outsurce form Section Start -->
            <form role="form" name="frmreg" id="frmreg" method="post" enctype="multipart/form-data">


              <div class="col-lg-12">
                <div class="panel panel-default panel-table">
                  <div class="panel-heading">
                    <div class="row">
                      <div class="col col-xs-6">
                        <h3 class="panel-title">To Add More Detail Please Click On "Add Row" Button</h3>
                      </div>
                      <div class="col col-xs-6 text-right">
                      </div>
                    </div>
                  </div>
                  <div class="panel-body">


                    <table class="table table-bordered table-hover" align="center" id="tab_logic">
                      <thead>
                        <tr style="background-color: teal;color:white;">
                          <th class="text-center">
                            #
                          </th>
                          <th class="text-center">
                            Topic Name
                          </th>
                          <th class="text-center">
                            Allocated Trainings
                          </th>
                          <th class="text-center">
                            Additional Trainings
                          </th>
                          <th class="text-center">
                            Total Number of Participant
                          </th>
                          <th class="text-center">
                            Proposed Days
                          </th>
                          <th class="text-center">
                            Subsidy Per Participant
                          </th>
                          <th class="text-center">
                            Total Training Value
                          </th>
                        </tr>
                      </thead>
                      <tbody>


                        <tr id='addr0'>
                          <td>
                            1
                          </td>
                          <td>
                            <select class="form-control" required id="topic" name="topic">
                              <option selected disabled value="">Select Topic</option>
                              <option value="">Topic 1</option>

                            </select>
                          </td>
                          <td>
                            <input type="text" name="alloc_trainig[]" id="alloc_trainig[]" placeholder="Allocated Trainings" class="AllocatedTrainings form-control" />
                          </td>
                          <td>
                            <input type="text" name="add_traing[]" id="add_traing[]" placeholder="Additional Trainings (if assigned)" class="form-control" />
                          </td>
                          <td>
                            <input type="text" name="no_patycpnt[]" id="no_patycpnt" placeholder="No.of Participant" title="No.of Participant" class="Participants form-control" />
                          </td>
                          <td>
                            <input type="text" name="prosd_days[]" id="prosd_days[]" placeholder="Enter Proposed Days" title="No.of Proposed Days" class="form-control" />
                          </td>
                          <td>
                            <input type="text" name="subsify_per_patrcpnt[]" id="subsify_per_patrcpnt[]" placeholder="Enter Subsidy Per Participant" title="Subsidy Per Participant" class="Subsidy form-control" />
                          </td>
                          <td>
                            <input type="text" name="total_value[]" id="total_value[]" placeholder="Total Value" title="Total Value" readonly class="TotalAmount form-control" />
                          </td>
                        </tr>
                        <tr id='addr1'></tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="panel-body">
                    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
                  </div>
                </div>
              </div>
              <div class="col-lg-12">
                <table class="table table-bordered" border="1" align="center">
                  <tr>
                    <th scope="row" style="font-size:10px;color:white" align="left" bgcolor="teal">Total Assigment Value</th>
                    <th align="left" style="font-size:10px;color:white" scope="row">
                      <input class="Contract form-control" type="text" required="required" name="contrctval" id="contrctval" readonly />
                    </th>
                  </tr>
                </table>
                <tr>
                  <th width="234" scope="col" bgcolor="teal" align="left" style="font-size:12px">
                    <input class="btn btn-primary btn-lg btn-block" type="submit" name="SubmitButton" id="SubmitButton" value="Submit">
                  </th>
                </tr>
              </div>
            </form>
            <!-- pre outsurce form Section Section End -->
          </div>
          <br /> <br /> <br />
        </div>
      </div>
    </div>
  </div>

标签： javascriptjquery

解决方案

尝试删除数字检查并不受任何限制地实现计算，做一个最小的测试，它可能会起作用。

推荐阅读