如何从选定的表格行中获取值?
当用户使用复选框选项选择一行并点击“计算折旧”时,我想要获取{{asset.purchaseValue}},{{asset.residualValue}},{{asset.purchaseDate}}和{{asset.ddate}}执行计算以发送回用户。我如何在jQuery,AngularJS或vanilla Javascript中获得这些值?如何从选定的表格行中获取值?
<table align="center" class="assetlist">
<thead>
<tr>
<th width="45px">
<select ng-model="sortBy" class="localSearch">
<option value="title">Title</option>
<option value="ddate">Disposal Date</option>
<option value="date">Purchase Date</option>
<option value="residualValue">Residual Value</option>
<option value="purchaseValue">Purchase Value</option>
</select>
</th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Title" ng-model="searchString.title" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Date" ng-model="searchString.date" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Value" ng-model="searchString.purchaseValue" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Disposal Date" ng-model="searchString.ddate" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Residual Value" ng-model="searchString.residualValue" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="asset in assets | orderBy:sortBy | filter:searchString : searchStrict | limitTo: rowLimit">
<td><input type="checkbox" ng-model="checked"/></td>
<td>{{asset.title}}</td>
<td>{{asset.date | date: "MMMM d, y"}}</td>
<td>{{asset.purchaseValue | currency:"£"}}</td>
<td>{{asset.ddate | date: "MMMM d, y"}}</td>
<td>{{asset.residualValue | currency:"£"}}</td>
</tr>
</tbody>
</table>
<button class="formbtn" ng-disabled="!checked">Calculate Depreciation</button>
传递该行,当用户检查框:
HTML:
<input type="checkbox" ng-model="checked" ng-checked="evaluate(asset)"/>
的JavaScript:
$scope.evaluate = function(asset) {
//var purchaseValue = asset.purchaseValue
//var residualValue = asset.residualValue
//var purchaseDate = asset.purchaseDate
//var ddate = asset.ddate
//do calculations
}
OP不希望它复选框点击,而是在'ng-repeat'范围外的按钮点击 – Sajal
@Sajal从OP的问题:'当用户使用复选框选项选择一行时 - 该复选框是一行上的'td'... –
如果答案没有解决问题,OP应该添加一个[Plunker](https://plnkr.co),以便我们可以看到关于代码... –
这是给你所需的输出修改后的代码: (copy and try it!)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var purchaseValue,residualValue,life=1;
$(".ckb").on('click',function(){
var checked=$(this).is(':checked');
if(checked){
//checkbox checked
var tr=$(this).parent().parent().parent();
var titlevalue=tr.find('td:eq(1)').html();
purchaseValue=tr.find('td:eq(3)').html();
residualValue=tr.find('td:eq(5)').html();
}else{
//checkbox unchecked
}
});
$("#calculateId").on('click',function(){
if(residualValue==undefined&&residualValue==undefined){
alert('please select the checkbox');
}else{
// alert(purchaseValue);
//alert(residualValue);
var result=((parseInt(purchaseValue)-parseInt(residualValue)) /life);
alert('result:'+result);
}
});
});
</script>
</head>
<body>
<table align="center" class="assetlist">
<thead>
<tr>
<th width="45px">
<select ng-model="sortBy" class="localSearch">
<option value="title"> Title</option>
<option value="ddate"> Disposal Date</option>
<option value="date"> Purchase Date</option>
<option value="residualValue">residualValue</option>
<option value="purchaseValue">purchaseValue</option>
</select>
</th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Title" ng-model="searchString.title" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Date" ng-model="searchString.date" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Value" ng-model="searchString.purchaseValue" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Disposal Date" ng-model="searchString.ddate" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Residual Value" ng-model="searchString.residualValue" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="asset in assets | orderBy:sortBy | filter:searchString : searchStrict | limitTo: rowLimit">
<td><input type="checkbox" class="ckb" ng-model="checked"/></td>
<td>title1</td>
<td>date1</td>
<td>20</td>
<td>ddate1</td>
<td>10</td>
</tr>
</tbody>
</table>
</form>
<button class="formbtn" ng-disabled="!checked" id="calculateId">Calculate Depreciation</button>
</body>
</html>
您好,这几乎是我想实现的 - 然而,代码输出不正确的信息。 我想获取asset.purchaseDate,asset.ddate,asset.residualValue,asset.purchaseValue中的值。然后我要输出以下计算以向用户显示资产折旧:((purchaseValue-residualValue)/ life)。谢谢 –
而不是动态值我已经采取了硬编码values.but逻辑将是正确的。请参阅我的评论变量/ var date =&/ var purchaseValue ..删除评论和做计算。 –
只为你,如果你面对任何完成,我修改code.comment。 –
,因为有一个以上的资产,你应该对复选框,点击该资产在<td>
<tr ng-repeat="asset in assets | orderBy:sortBy | filter:searchString : searchStrict | limitTo: rowLimit">
<td><input type="checkbox" ng-model="asset.selected" /></td>
<td>{{asset.title}}</td>
<td>{{asset.date | date: "MMMM d, y"}}</td>
<td>{{asset.purchaseValue | currency:"£"}}</td>
<td>{{asset.ddate | date: "MMMM d, y"}}</td>
<td>{{asset.residualValue | currency:"£"}}</td>
</tr>
<button class="formbtn" ng-click="calculateDep()">Calculate Depreciation</button>
在控制器绑定一个新selected
属性为true(或切换)为ng-model="asset.selected"
,
//For Calculation
$scope.calculateDep = function() {
angular.forEach($scope.assets, function(asset) {
if (asset.selected) {
//Here are asset.purchaseValue,asset.residualValue ...
//perform calculation individually for an asset
//or send the enitire selected assets for calculation by creating a new scope array for selected ones
}
})
}
UPDATE:
请参见下面的代码片段,当你选择一个或M矿石复选框并计算dep,您可以在控制台中看到整个对象。
angular.module("app", []).controller("ctrl", function($scope) {
$scope.assets = [{
title: 'Asset1',
date: '',
purchaseValue: 500,
ddate: '',
residualValue: 100
}, {
title: 'Asset2',
date: '',
purchaseValue: 500,
ddate: '',
residualValue: 100
}];
//For Calculation
$scope.calculateDep = function() {
console.clear();
angular.forEach($scope.assets, function(asset) {
if (asset.selected) {
console.log(asset);
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<tr ng-repeat="asset in assets track by $index">
<td><input type="checkbox" ng-model="asset.selected" /></td>
<td>{{asset.title}}</td>
<td>{{asset.date}}</td>
<td>{{asset.purchaseValue}}</td>
<td>{{asset.ddate}}</td>
<td>{{asset.residualValue}}</td>
</tr>
</table>
<button class="formbtn" ng-click="calculateDep()">Calculate Depreciation</button>
</body>
感谢Sajal,请查看我的CodePen项目,以更好地了解我想实现的目标:https://codepen.io/cdochertyram/project/live/AnaKwM/ 我已将您的更新代码解释到我的项目中,但我收到NaN值。为什么是这样? –
使用'NG-click' – charlietfl
看看我的回答如下传递整个对象到一个函数。让我知道如果这有帮助! :) –
你可以看到我的答案更新。 – Sajal