Develop Reference

How to make first column's every row clickable to get data from that whole row? JavaScript

I'm trying to make a table's first column's each row (in this case order IDs) clickable so that I can display more info from this specific order ID in another container on my website. I looped through some JSON data to create the table like this:
function printData(jsonData) {
let myTable = document.getElementById("jsonTable")
for(let i=0; i < jsonData.length; i++) {
let row = `<tr>
<td>${jsonData[i].orderid}</td>
<td>${jsonData[i].customerid}</td>
<td>${jsonData[i].customer}</td>
<td>${jsonData[i].invaddr}</td>
<td>${jsonData[i].delivaddr}</td>
<td>${jsonData[i].deliverydate}</td>
<td>${jsonData[i].respsalesperson}</td></tr>`
jsonTable.innerHTML += row
}
}
And this is how my HTML file looks like:
<div class="datatable">
<div class="datatablecontent">
<table class="jsontable">
<tr id="jsontr">
<th>Order ID</th>
<th>Customer ID</th>
<th>Customer</th>
<th>InvAddr</th>
<th>Delivery Address</th>
<th>Delivery Date</th>
<th>Resp. For Sale </th>
<tbody id="jsonTable">
</tbody>
</tr>
</table>
</div>
</div>

While iterating over jsonData, you can declare a callback in an event listener.
Because you're using template literals, I'm keeping it concise and passing the row index. You can also pass the data itself by adding an event listener in JS, to do that you'll need to access the element.
function logRowData(index) {
console.log(jsonData[index])
}
let jsonData = [
{orderid: 0, customerid:14, customer: 'abc'},
{orderid: 1, customerid:25, customer: 'xyz'}
]
printData(jsonData)
function printData(jsonData) {
let myTable = document.getElementById("jsonTable")
for(let i=0; i < jsonData.length; i++) {
let row = `<tr>
<td onclick={logRowData(${i})}>${jsonData[i].orderid}</td>
<td>${jsonData[i].customerid}</td>
<td>${jsonData[i].customer}</td></tr>`
jsonTable.innerHTML += row
}
}
<div class="datatable">
<div class="datatablecontent">
<table class="jsontable">
<tr id="jsontr">
<th>Order ID</th>
<th>Customer ID</th>
<th>Customer</th>
<tbody id="jsonTable">
</tbody>
</tr>
</table>
</div>
</div>

how to use angularJS with appended elements

Basically, i have a structure like this example
Every cell of last column needs to have this formula:
value[i][2] = value[i-1][2] + value[i][0] - value[i][1]
I'm actually having 2 problems. The first one comes when i just try to program the first row of the table. What's wrong with this extremely simple thing?
angular.module('calc', [])
.controller('cont', function($scope) {
$scope.addNumbers = function() {
var c = aCom[30][5];
var a = parseFloat($scope.entrata1);
var b = parseFloat($scope.uscita1);
return c+a-b;
}
});
considering entrata1 and uscita1 as they are value[0][0] and value[0][1].
But most important, how can I extend the formula to all other rows? Consider that every row except the first one is created dinamically with an appendChild()function to the body, do i have to use at every appended item the function setAttribute("ng-model","entrata")?
Thanks

I would suggest forget appendchild. Use ng-repeat and add rows adding to the scope
like this
angular.module('plunker', []).controller('tableCtrl', function($scope,$filter) {
$scope.rows = [{'a': 0,'u': 300},{'a': 0,'u': 150},{'a': 200,'u': 0},{'a': 0,'u': 300}];
$scope.rowscalc = function(val){
var total=0;
angular.forEach($scope.rows, function(values, key){
if(key<=val) total += values.u-values.a;});
return total;
};
$scope.addRowM = function(){
$scope.rows.push({'a': 0, 'u': 0});
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="plunker" ng-controller="tableCtrl">
<table class="table">
<thead>
<tr>
<td class="dthead">A</td>
<td class="dthead">U</td>
<td class="dthead">Total</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td><input type="number" ng-model="row.a"/></td>
<td><input type="number" ng-model="row.u"/></td>
<td>{{rowscalc($index)}}</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="addRowM()">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
you can check in plunker

AngularJS dynamically assign IDs to elements in a dynamic table

Is there a way in AngularJS that I can dynamically ID or in a dynamic table? I have this table that dynamically adds rows.
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in tableArray track by $index">
<td>Red Corner</td>
<td>Round {{$index}}</td>
<td>Blue Corner</td>
</tr>
</tbody>
</table>
and my script
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller and register the module in one line
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;
$scope.tableArray = [];
$scope.getRoundsArray = function() {
$scope.tableArray = new Array( $scope.selectedRounds * 1);
}
});
So the amount of rows in the table are dynamically selected and added. Red Corner and Blue Corner will be replaced with drop down lists which have a 1 to 10 value. At the end of the table I will sum the drop down list values so I want to be able to do math on round1Red + round2Red .. and so on. Is there a way I can dynamically assign IDs to each when the table is created?

You can dynamically add IDs to the table like so:
<tr ng-repeat="x in tableArray track by $index">
<td id="redCorner{{$index}}">Red Corner</td>
<td>Round {{$index}}</td>
<td id="blueCorner{{$index}}">Blue Corner</td>
</tr>
This should give you unique red and blue corner IDs for each row of the table in the form of redCorner0, blueCorner0, redCorner1.... Let me know if this helps.

How can i make some of the table rows not selectable in SmartTable angularjs

I am using angularJS and smart table framework to manage my table in html:
The table rows are selectable using SmartTable attribute : st-select-row="row".
after user selects rows and click "add" button the selected data registered to some other list.
I don't want to remove added rows from table but I do want them to be not selectable.
This is code example:
HTML:
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<table id="Table" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="farmName">Farm Name</th>
<th st-sort="FarmDescription">Description</th>
<th st-sort="DataCenter">DC</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td ng-bind="row.farmName">{{row.farmName}}</td>
<td ng-bind="row.FarmDescription"></td>
<td ng-bind="row.DataCenter"></td>
</tr>
</tbody>
</table>
<button id="add" ng-click="add(displayedCollection)"> add </button>
<li>
<ul ng-bind="row.farmName" ng-repeat="row in added"></ul>
</li>
</body>
JavaScript:
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope) {
$scope.rowCollection = [
{farmName: 'farm1', FarmDescription: 'some farm1', DataCenter: 'London'},
{farmName: 'farm2', FarmDescription: 'some farm2', DataCenter: 'Paris'},
{farmName: 'farm3', FarmDescription: 'some farm3', DataCenter: 'Berlin'}
];
$scope.added = [];
$scope.add = function(rows){
angular.forEach(rows,function(row){
if (row.isSelected === true){
row.isSelected = false;
var index = $scope.added.indexOf(row);
if(index === -1){
$scope.added.push(row);
// row.disableSelection this is what i want to do
}
}
});
};
});
How can I implement such behavior?
plunker code:plunker
Thanks
Dima

You can add condition like
<tr st-select-row="isSelectableRow(row)" st-select-mode="multiple" ng-repeat="row in displayedCollection">
and in the controller
$scope.isSelectableRow = function (row) {
if (~$scope.added.indexOf(row))
return false;
return row;
}
And also, you have incorrect html
<li><ul>..</ul></li>
change it to
<ul><li>..</li></ul>
Working example here

can be done using the attribute st-select-row:
for example prevent the second row to be selectable
<tr st-select-row="$index != 1 ? row : null" st-select-mode="multiple" ng-repeat="row in displayedCollection">
plunker

AngularJS in HTML table

I want to create a table with products on a certain menu of a store.
The table is divided by categories (product categories) and for every category the desired products should be shown under his category.
Something like:
I am able to get the different categories in my html but when I want to use ng-repeat on table rows or table headers I get nothing...
<table class="table table-hover">
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-app="categories" ng-cloak="" ng-controller="category" ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
AngularJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
});
});
What is going wrong here?

Try this following code:
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
var categorie = results.data;
for(var i = 0; i < categorie.length; i++){
$scope.categories = categorie[i];
}
});
});

I found the solution myself:
<table ng-app="categories" ng-cloak="" ng-controller="category">
<tr>
<th>Menu items</th>
</tr>
<tr ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>

You shouldn't have ng-repeat of on your ng-app & ng-controller div. Even you don't need to do for loop. You categories does have category in it. You can access those inside ng-repeat using c only no need to specifying any index in it.
Markup
<body class="table table-hover" ng-app="categories" ng-cloak="" ng-controller="category" >
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-repeat="c in categories">
<th>{{c}}</th>
</tr>
</table>
</body>