使用 Javascript 在动态添加删除行中计算行值和列值
Posted
技术标签:
【中文标题】使用 Javascript 在动态添加删除行中计算行值和列值【英文标题】：Calculate Row Values & Column Values in Dynamic Add Delete Rows Using Javascript 【发布时间】：2021-10-25 08:23:01 【问题描述】：我正在尝试使用 JS 执行以下功能。我已经达到了参与者总和的总数，但是当我动态添加行时它不起作用。仅在我更改第一行时才生效。
-
参加人数 * 每个参加者的补贴 = 总培训价值
总分配值中的总训练值列总和
此外，我不知道如何获得每行的总训练值和总训练值的总和。你能在这方面帮助我，这样我就可以完成我开始的工作。
//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 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>【问题讨论】：
【参考方案1】：尝试删除数字检查并实现不受任何限制的计算，做一个最小的测试，它可能会起作用。
【讨论】：
以上是关于使用 Javascript 在动态添加删除行中计算行值和列值的主要内容，如果未能解决你的问题，请参考以下文章
javascript [删除样式表]使用jQuery删除动态添加的样式表#javascript #sitewrench