我正在使用 javascript 創建一個 /reducesadds 表行的串列。我很想顯示插入后的成本。代碼顯示運算式名稱但未鍵入值。期望的結果是當用戶鍵入 5 時，考慮到動態輸入，它顯示 5。我正在使用 javascript 創建一個 /reducesadds 表行的串列。我很想顯示插入后的成本。代碼顯示運算式名稱但未鍵入值。期望的結果是當用戶鍵入 5 時，考慮到動態輸入，它顯示 5
<div class="col-sm-12">
<form method="POST">
<table class="table" id="myTa">
<thead>
<tr>
<th>Details</th>
<th>Quantity</th>
<th>Unit cost</th>
<th>Total cost</th>
</tr>
</thead>
</table>
<br>
<button class="btn btn-success" onclick="add()" type="button"> Add</button>
<button class="btn btn-danger" onclick="remove()" type="button">- Del</button>
<p id="demo"></p>
<script>
var n=1;
var o=1;
function remove()
{
var m = n-2;
var x = document.getElementById("myTa").rows.length-2;
var y = document.getElementById("myTa").rows.length-2;
var g = document.getElementById("myTa").rows.length-2;
var v = document.getElementById("myTa").rows.length-2;
var k = document.getElementById("myTa").rows.length-2;
document.getElementById("myTa").deleteRow(-1);
document.getElementById("demo").innerHTML = "<input name='total' value='" x "'
type='number' hidden/>";
}
function add()
{
var x = document.getElementById("myTa").rows.length;
var y = document.getElementById("myTa").rows.length;
var g = document.getElementById("myTa").rows.length;
var v = document.getElementById("myTa").rows.length;
var k = document.getElementById("myTa").rows.length;
var kk = document.getElementById("myTa").rows.length;
var ll = document.getElementById("myTa").rows.length;
var mm = document.getElementById("myTa").rows.length;
var nn = document.getElementById("myTa").rows.length;
var oo = document.getElementById("myTa").rows.length;
var pp = document.getElementById("myTa").rows.length;
var qq = document.getElementById("myTa").rows.length;
document.getElementById("demo").innerHTML = "<input name='total' value='" x "'
type='number' hidden/>";
var table = document.getElementById("myTa");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<textarea class='form-control' name='details" v "' required>.
</textarea>";
cell2.innerHTML = "<input type='number' class='form-control' data-ng-
model='quantity" oo "' name='quantity" k "' required/>";
cell3.innerHTML = "<input type='number' class='form-control' name='unit" g "'
required/>";
cell4.innerHTML = "<p> {{quantity" nn "}}</p>";
}
</script>
</form>
</div>
</div>
</div>
我正在使用 javascript 創建一個 /reducesadds 表行的串列。我很想顯示插入后的成本。代碼顯示運算式名稱但未鍵入值。期望的結果是當用戶鍵入 5 時，考慮到動態輸入，它顯示 5
uj5u.com熱心網友回復：
事情是這樣的：AngularJS 不能以這種方式作業，嘗試像這樣直接編輯 DOM 可能會導致許多問題。然而，當你學會了這樣做的角度方式時，你將永遠不會回頭。這要容易得多。
本質上，您有一個視圖（表），它將從資料（陣列）中生成。添加行或減去行就像從陣列中添加或減去行一樣簡單。這是一個快速演示，展示了一種實作方法，以及獲取總數。
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.tableData = [{
details: "Here are some details...",
quantity: 5,
unit_cost: 14.99
},
{
details: "Here are some details2...",
quantity: 2,
unit_cost: 4.99
},
{
details: "Here are some details3...",
quantity: 1,
unit_cost: 44.99
},
{
details: "Here are some details4...",
quantity: 0,
unit_cost: 104.99
}
];
$scope.getTotal = function() {
return $scope.tableData.reduce((b, a) => {
b = a.unit_cost * a.quantity;
return b;
}, 0).toFixed(2)
}
$scope.add = function() {
let blankRow = {
details: "",
quantity: "",
unit_cost: ""
}
$scope.tableData.push(blankRow)
};
$scope.remove = function(index) {
$scope.tableData.splice(index, 1);
};
}]);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form method="POST">
<table class="table">
<thead>
<tr>
<th>Details</th>
<th>Quantity</th>
<th>Unit cost</th>
<th>Total cost</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='i in tableData'>
<td>
<textarea class='form-control' ng-model="i.details" name="details_{{$index}}" required></textarea>
</td>
<td>
<input type='number' name="quantity_{{$index}}" class='form-control' ng-model='i.quantity' required/>
</td>
<td>
<input type='number' name="unit_cost_{{$index}}" class='form-control' ng-model='i.unit_cost' required/>
</td>
<td>
${{(i.unit_cost * i.quantity).toFixed(2)}}
</td>
<td>
<button class="btn btn-danger" ng-click="remove($index)" type="button">- Del</button>
</td>
</tr>
</tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="add()" type="button"> Add</button>
<hr>
<p> Total: ${{getTotal()}}</p>
</form>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/428402.html
下一篇：從api回應拆分日期和時間