How to Add a New Row to an HTML Table in AngularJS
In this guide, we will explore how to insert or append a new row to an HTML table using AngularJS. We will use the push() method to dynamically add rows to the table.
Approach
The table data is stored in an array.
The push() method is used to append new rows to the array.
The ng-repeat directive is used to display the array contents in the table.
Step 1: Example with a Single Column Table
In this example, we will create a simple table with one column, and the content will be stored in an array. Clicking a button will add a new row to the table.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Appending a New Table Row in AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.rows = ['row-1', 'row-2'];
$scope.c = 2;
$scope.addRow = function () {
$scope.c++;
$scope.rows.push('row-' + $scope.c);
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">AngularJS Table Row Addition</h1>
<h3>How to Add a New Row in AngularJS</h3>
<div ng-app="app">
<div ng-controller="controller">
<button ng-click='addRow()'>Click to Add Row</button><br><br>
<table style="border: 1px solid black; margin: 0 auto;">
<tr><th>Column 1</th></tr>
<tr ng-repeat="val in rows">
<td>{{val}}</td>
</tr>
</table><br>
</div>
</div>
</body>
</html>Describe:
The rows array stores the table data.
The addRow() function is triggered by a button click, and it adds a new row to the array using the push() method.
ng-repeat is used to display each value in the array as a new row in the table.
Step 2: Example with a Three-Column Table
In this example, we will create a table with three columns, where each row is an object. Each time the button is clicked, a new object is pushed to the array, and a new row is added to the table.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Appending a New Table Row in AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>
var myApp = angular.module("app", []);
myApp.controller("controller", function ($scope) {
$scope.rows = [
{ 'ff': '11', 'fs': '12', 'ft': '13' },
{ 'ff': '21', 'fs': '22', 'ft': '23' }
];
$scope.c = 2;
$scope.addRow = function () {
$scope.c++;
$scope.rows.push({
'ff': $scope.c + '1',
'fs': $scope.c + '2',
'ft': $scope.c + '3'
});
};
});
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">AngularJS Table Row Addition</h1>
<h3>How to Add a New Row with Multiple Columns</h3>
<div ng-app="app">
<div ng-controller="controller">
<button ng-click='addRow()'>Click to Add Row</button><br><br>
<table style="border: 1px solid black; margin: 0 auto;">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr ng-repeat="val in rows">
<td>{{val.ff}}</td>
<td>{{val.fs}}</td>
<td>{{val.ft}}</td>
</tr>
</table><br>
</div>
</div>
</body>
</html>Describe:
The rows array stores objects representing rows with three columns.
Each time the addRow() function is triggered, a new object is pushed to the array.
The ng-repeat directive generates table rows from the array of objects, displaying the properties (ff, fs, ft) in separate columns.
Using AngularJS, appending rows to an HTML table is simple and effective. You can easily update the table’s data dynamically by using the push() method and ng-repeat directive.