Creating a dynamic feature to add a row at the bottom of a table

Question

Creating a dynamic feature to add a row at the bottom of a table

I am currently working with JavaScript in the context of an AngularJS application, attempting to insert a row at the bottom of a table that shows the total sum of a specific column.

Here is the code snippet I am using:

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

Unfortunately, using insertRow(-1) does not seem to work as expected. The only way I have been able to see the new row is by passing in zero as the first parameter, but then the row gets inserted into the table header.

Below is my complete code snippet:

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

javascript angularjs

Answer 1

Answer №1

There are various approaches you could take to achieve this, such as binding to a freshly updated array using ngFor or exploring new template and binding techniques. However, the general advice would likely be to avoid using tables if possible.

If using a table is unavoidable and all you need to do is add another HTML row, you can resort to an old trick that involves manipulating innerHTML (although purists may object). Alternatively, you could adopt a more object-oriented programming approach by utilizing document fragments for updates.

Wondering why tbody is necessary? Try selecting the table with querySelector and logging it to the console to observe how the rows are enclosed within a tbody.

This is a rudimentary method but it gets the job done. In the era of AngularJS, sometimes simplicity was key in getting tasks completed efficiently.

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

Answer 2

There are various approaches you could take to achieve this, such as binding to a freshly updated array using ngFor or exploring new template and binding techniques. However, the general advice would likely be to avoid using tables if possible.

If using a table is unavoidable and all you need to do is add another HTML row, you can resort to an old trick that involves manipulating innerHTML (although purists may object). Alternatively, you could adopt a more object-oriented programming approach by utilizing document fragments for updates.

Wondering why tbody is necessary? Try selecting the table with querySelector and logging it to the console to observe how the rows are enclosed within a tbody.

This is a rudimentary method but it gets the job done. In the era of AngularJS, sometimes simplicity was key in getting tasks completed efficiently.

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

Creating a dynamic feature to add a row at the bottom of a table

Answer №1

Similar questions

What is the process for uploading an image using fetch?

Issue with initializing MdTable in Vue Material when fetching data

Interactive Thumbnail Previews

JQuery table sorter is unable to effectively sort tables with date range strings

As I embark on building my web application using next.js, I begin by importing firebase from the "firebase" package. Unfortunately, a particular error unexpectedly surfaces in the terminal

Ways to eliminate a textbox from an HTML table using jQuery or JavaScript while retaining the textbox values

"Trouble with JavaScript boolean values in if-else conditions - not functioning as expected

Every time I attempt to submit the login form on the Ionic and Angular page, instead of capturing the values of the form group, the page simply refreshes

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Angular 2 Issue: Error Message "Cannot bind to 'ngModel'" arises after FormsModule is added to app.module

Why does jQuery's each function struggle to retrieve the width of hidden elements?

Parsing form array/bracket fields into actual arrays with ExpressJS

An unexpected import token was encountered while using ReactJS and Babel

The DOM fails to reflect changes in the data variable in VueJS

$.ajax causing a JSON input string malfunction

Map Row is unreturned

Utilize the Angular 1 function again

The user removal process is not functioning properly

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?