stackoom
  简体   繁体   中英

How to get values from selected table row?

 原文  2017-10-13 13:05:46  6   3    javascript/ jquery/ angularjs/ html-table

Question

When the user selects a row using the checkbox option, and clicks 'Calculate Depreciation' I want to grab the values in {{asset.purchaseValue}}, {{asset.residualValue}}, {{asset.purchaseDate}} and {{asset.ddate}} to perform calculations to send back to the user. How can I get these values in jQuery, AngularJS or 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>

3 answers

solution1
 0  2017-10-13 13:12:35

Pass the row in when the user checks the box:

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
}

solution2
 0  2017-10-13 13:25:37

Here is the modified code for your desired output:(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>

solution3
 0  2017-10-13 13:27:41

Since there are more than one asset, you should bind a new selected property to true(or toggle) for that asset on checkbox click as ng-model="asset.selected" in the <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>

In Controller, 

//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:

See the snippet below, when you select one or more checkbox and calculate dep, you can see the entire object in the console. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get selected row values from a table How to get row values from selected row in a Data Table in R Shiny App In jquery how to get the values of a particular row of a table that is selected using checkbox? Angular 6 - Material Table - Get selected row values How to get the row values from a Table in php How to get selected row from a table in html using javascript? How to detect selected row in sapui 5 Table and get data from it? Javascript: how to get values from all selected checkboxes from a table Get values from table row Bootstrap table get data from selected row
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM