[英]Dynamically Adding A Row To Bottom of Table
我试图在AngularJS应用程序的上下文中使用JavaScript,在表的末尾添加一行,以显示特定列的总和。
在下面的代码中:
var table = document.querySelector('.table');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cellData = document.createTextNode('Total ' + '$' + this.totals);
cell1.appendChild(cellData);
row.appendChild(cell1);
使用insertRow(-1)不起作用。 我能够看到我的行的唯一方法是将零作为第一个参数传入。 与insertRow(0)中一样,但是该行作为表标题中的一行插入。
这是我的完整代码:
import { digest, showLoader } from 'act/services/events';
import 'act/components';
import Searcher from 'act/services/lists/searcher';
import * as moment from 'moment';
import * as api from '../services/totals';
import {header, dev} from 'act/services/logger';
import {goToError} from 'act/services/controller-helpers';
import '../components/store-total';
const defaultStartDate = moment().startOf('day');
export default class StoreTotalsController {
constructor() {
this.attendantNames = [];
this.stores = [];
this.emptyResult = true;
this.totals = 0;
}
getAttendants() {
showLoader('Searching');
const baseUrl = '/src/areas/store-totals/services/tender-total-data.json';
const getStores = new Request(baseUrl, {
method: 'GET'
});
fetch(getStores).then(function(response){
return response.json();
}).then(resp => {
if (!(resp[0] && resp[0].error)) {
this.attendantNames = resp.stores[0].attendants;
this.attendantNames.forEach(a=>{
this.totals += a.total;
console.log(this.totals);
})
var table = document.querySelector('.table');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cellData = document.createTextNode('Total ' + '$' + this.totals);
cell1.appendChild(cellData);
row.appendChild(cell1);
this.emptyResult = false;
this.errorMessage = null;
} else {
this.errorMessage = resp[0].error.name;
}
digest();
showLoader(false);
});
}
searchIfReady() {
if (this.search && this.date && this.date.isValid()) {
this.getSearch();
}
}
updateDate(date) {
this.date = moment(date).startOf('day');
this.searchIfReady();
}
}
StoreTotalsController.$inject = ['$stateParams'];
一些解决方法,使用ngFor绑定到新更新的数组,依此类推。 模板,绑定,各种新颖和新颖的方式。 最终,建议可能是“不要使用桌子”。
但是,如果必须使用表,而您真正想要做的就是追加另一个HTML行,那么这个古老的技巧就可以工作(尽管它可能会使Angular Chorus发出啸叫声)。 请注意,您正在操纵innerHTML。 您也可以使用文档片段更新此内容,使其更具OOP风格。
为什么要肢体? 使用querySelector选择表并进行console.log记录。 您会看到行被包裹在tbody中。
这是超幼稚的版本。 虽然有效。 在AngularJS时代,有时候这种事情会让您准时回家。
<html>
<head>
<body>
<table>
<tr>
<td>Row 1</td>
</tr>
</table>
<button onclick="addRow ()">Click Me</button>
<script>
function addRow ( ) {
const tbody = document.querySelector ( 'tbody' );
let inner = tbody.innerHTML;
inner += '<tr><td>Row 2 (compute value as necessary)</td></tr>';
tbody.innerHTML = inner;
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.