动态地向表格底部添加一行

Question

Using JavaScript, within the context of an AngularJS application, I am trying to add a row at the end of a table that displays the sum total of a particular column. 我试图在AngularJS应用程序的上下文中使用JavaScript，在表的末尾添加一行，以显示特定列的总和。

In the following code: 在下面的代码中：

  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);

Using insertRow(-1) isn't working. 使用insertRow（-1）不起作用。 The only way I am able to see my row is if I pass in zero as the first parameter. 我能够看到我的行的唯一方法是将零作为第一个参数传入。 As in insertRow(0), but the row is inserted as a row in the table header. 与insertRow（0）中一样，但是该行作为表标题中的一行插入。

Here's my full code: 这是我的完整代码：

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'];

Answer 1

A few ways to go about this, bind to a newly updated array with an ngFor, and so on. 一些解决方法，使用ngFor绑定到新更新的数组，依此类推。 Templates, binding, all sorts of new and fancy ways. 模板，绑定，各种新颖和新颖的方式。 Ultimately the advice would probably be, "don't use a table". 最终，建议可能是“不要使用桌子”。

But if you must use a table, and all you really want to do is append another HTML row, this old trick works (though it may get the Angular chorus howling). 但是，如果必须使用表，而您真正想要做的就是追加另一个HTML行，那么这个古老的技巧就可以工作（尽管它可能会使Angular Chorus发出啸叫声）。 Be aware you're manipulating innerHTML. 请注意，您正在操纵innerHTML。 You could also update this using document fragments to make it a bit more OOP-ish. 您也可以使用文档片段更新此内容，使其更具OOP风格。

Why tbody? 为什么要肢体？ Select the table with querySelector and console.log it. 使用querySelector选择表并进行console.log记录。 You'll see the rows are wrapped in a tbody. 您会看到行被包裹在tbody中。

This is the ultra naive version. 这是超幼稚的版本。 Works though. 虽然有效。 Back in the AngularJS days sometimes this sort of thing just got you home on time. 在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>

动态地向表格底部添加一行

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-17 16:53:57

动态地向表格底部添加一行

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-17 16:53:57

解决方案1
0 已采纳 2018-09-17 16:53:57