動態地向表格底部添加一行

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

動態地向表格底部添加一行

問題描述

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