如何從選定的表格行中獲取值？

當用戶使用複選框選項選擇一行並點擊「計算折舊」時，我想要獲取{{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>

來源

2017-10-13 Charlotte Docherty

使用'NG-click' – charlietfl

看看我的回答如下傳遞整個對象到一個函數。讓我知道如果這有幫助！ :) –

你可以看到我的答案更新。 – Sajal

傳遞該行，當用戶檢查框：

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 
}

來源

2017-10-13 13:12:35

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>

來源

2017-10-13 13:25:37

您好，這幾乎是我想實現的 - 然而，代碼輸出不正確的信息。我想獲取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>

來源

2017-10-13 13:27:41 Sajal

感謝Sajal，請查看我的CodePen項目，以更好地瞭解我想實現的目標：https://codepen.io/cdochertyram/project/live/AnaKwM/ 我已將您的更新代碼解釋到我的項目中，但我收到NaN值。爲什麼是這樣？ –

如何從選定的表格行中獲取值？

回答

相關問題