Динамическое добавление строки в конец таблицы - PullRequest
Новая
       1

Динамическое добавление строки в конец таблицы

0 голосов
/ 17 сентября 2018

Используя JavaScript, в контексте приложения AngularJS я пытаюсь добавить строку в конец таблицы, которая отображает общую сумму определенного столбца.

В следующем коде: 

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

1 Ответ

0 голосов
/ 17 сентября 2018

Несколько способов сделать это, привязка к недавно обновленному массиву с помощью ngFor и так далее. Шаблоны, переплеты, всевозможные новые и причудливые способы. В конечном итоге совет, вероятно, будет «не использовать стол».

Но если вам нужно использовать таблицу, и все, что вы действительно хотите сделать, это добавить еще одну строку HTML, этот старый трюк работает (хотя он может выть Angular хор). Помните, что вы манипулируете innerHTML. Вы также можете обновить это, используя фрагменты документа, чтобы сделать его немного более понятным.

Почему? Выберите таблицу с помощью querySelector и console.log. Вы увидите, что ряды завернуты в тело.

Это ультра наивная версия. Работает хоть. В прежние времена 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...