Question

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

Answer 1

一些解决方法，使用ngFor绑定到新更新的数组，依此类推。模板，绑定，各种新颖和新颖的方式。最终，建议可能是“不要使用桌子”。

但是，如果您必须使用表，而您真正想要做的就是追加另一个HTML行，那么这个古老的技巧就可以工作（尽管它可能会使Angular合唱产生啸叫声）。请注意，您正在操纵innerHTML。您还可以使用文档片段更新此内容，使其更具面向对象性。

为什么肢体？使用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>

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

1 个答案: