We Keep Coding

How can I add rows to be filled from javascript

I have my code for a table that I created in html with one row, but I want to add more rows to it, the number of total rows has to be equal to the value that my combox takes (24,36,48 rows in total):
<div id="visible" class="table-responsive">
<table class="table " id="tablacondatos" name="tablacondatos">
<thead>
<tr>
<th scope="col">MES</th>
<th scope="col">CUOTA</th>
<th scope="col">INTERES</th>
<th scope="col">AMORTI.</th>
<th scope="col">CAPITAL</th>
<th scope="col">SEGURO DESGRAV.</th>
<th scope="col">SEGURO INMOBIL.</th>
<th scope="col">GASTOS ADM.</th>
<th scope="col">CUOTA FINAL</th>
</tr>
</thead>
<tbody id="cuerpotabla" name="cuerpotabla">
<tr id="filamaestra">
<td id="mes" name="mes">0</td>
<td id="cuota" name="cuota">0</td>
<td id="interes" name="interes">0</td>
<td id="amorti" name="amorti">0</td>
<td id="capital" name="capital">0</td>
<td id="segurodesgrav" name="segurodesgrav">0</td>
<td id="seguroinmobil" name="seguroinmobil">0</td>
<td id="gastosadm" name="gastosadm">0</td>
<td id="cuotafinal" name="cuotafinal">0</td>
</tr>
</tbody>
</table>
</div>
This is how I get the value of my combo for the rows:
ahorrar = document.getElementById("plazooperacion").value; // 24,36,48 rows
I am using this code to add rows, but the problem is that it generates too many rows, and in the first cells I am putting a counter, which goes from 1 to 24, or 1 to 36 or from 1 to 48; but it generates them backwards (it puts the last one first and the first one last):
ms=ms+1; //accountant
var table = document.getElementById("cuerpotabla");
var row = table.insertRow(0);
//this adds row in 0 index i.e. first place
row.innerHTML = "<td>"+ms+"</td><td id='cuota' name ='cuota'>"+cuota+"</td><td id='interes' name='interes'>"+interes+"</td><td id='amorti' name='amorti'>"+amorti+
"</td><td id='capital' namre='capital'>"+capital+"</td><td id='segurodesgrav' name='segurodesgrav'>"+segurodesgrav+"</td><td id='seguroinmobil' name='seguroinmobil'>"+seguroinmobil+"</td><td id='gastosadm' namre='gastosadm'>"+gastosadm+"</td><td id='cuotafinal' name='cuotafinal'>"+cuotafinal+"</td>";

Calculating Sum of table in HTML

In my web application, I have created table and assigned values for table from controller.
Here I want to show the total of column value Amount at the end of table.
So I have done this so far but It didn't show the total value.
var tds = document.getElementById('PayvouchDt').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
sum += parseInt(tds[i].cells[3].innerHTML);
}
document.getElementById('PayvouchDt').innerHTML += '<tr><td>' + sum + '</td><td>Total Value</td></tr>';
<table class="table table-striped" id="PayvouchDt">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Cost Center</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
#{int RowNo = 0;} #for (int i = 0; i
< Model.First().PaymentVouchDetails.Count; i++) { <tr>
<td>#{RowNo++;} #RowNo</td>
<td>#Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].Details)</td>
<td>#Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].CostCenter)</td>
<td class="count-me">Rs.#Html.DisplayFor(Model => Model.First().PaymentVouchDetails[i].Amount)</td>
</tr>
}
</tbody>
</table>

You need the rows. The cells do not have cells
Also an amount normally have decimals so we need them as floats instead of ints
var trs = document.getElementById('PayvouchDt').getElementsByTagName('tr');
var sum = 0;
for (var i = 0; i < trs.length; i++) {
sum += parseFloat(trs[i].cells[3].textContent);
}
document.getElementById('PayvouchDt').innerHTML += '<tr><td>' + sum.toFixed(2) + '</td><td>Total Value</td></tr>';
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Cost Center</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="PayvouchDt">
<tr>
<td>1</td>
<td>Details</td>
<td>Costcenter</td>
<td class="count-me">1.50</td>
</tr>
<tr>
<td>2</td>
<td>Details</td>
<td>Costcenter</td>
<td class="count-me">3.20</td>
</tr>
</tbody>
</table>
I suggest to use the tbody and a reduce on the converted textContent
const tds = document.querySelectorAll('#PayvouchDt tr td.count-me'); // or td:nth-child(4)
const sum = [...tds].map(td => +td.textContent).reduce((a, b) => a + b)
document.getElementById('PayvouchDt').innerHTML += `<tr><td>${sum.toFixed(2)}</td><td>Total Value</td></tr>`;
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Description</th>
<th>Cost Center</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="PayvouchDt">
<tr>
<td>1</td>
<td>Details</td>
<td>Costcenter</td>
<td class="count-me">1.50</td>
</tr>
<tr>
<td>2</td>
<td>Details</td>
<td>Costcenter</td>
<td class="count-me">3.20</td>
</tr>
</tbody>
</table>

you can sum the elements of the array simply using the javascript [reduce method][1].
for example
const myArray = [{value: 1, name: 'john'}, {value: 2, name: 'doe'}, {value: 3, name: 'john'}, {value: 4, name: 'doe'}];
const v = myArray.reduce((tot, el) => tot + el.value, 0);
console.log(v)
you can take this snippet and adapt it to your need
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?retiredLocale=it

how to access an <a> tag inside a .js table loop?

HTML:
<tr id="header-row">
<th class="tableheaders" id="t_headersteamlink">steamlink</th>
<th class="tableheaders" id="t_headername">name</th>
<th class="tableheaders" id="t_headerbanned">banned?</th>
<th class="tableheaders" id="t_headerbandate">banDate</th>
<th class="tableheaders" id="t_headercreator">creator</th>
<th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>
<tr class="datarow">
<td >steamcommunity.com/id/example</td>
<td>exampleUser</td>
<td>yes</td>
<td>24/06/2021</td>
<td>exampleCreator</td>
<td>20/06/2021</td>
</tr>
JavaScript:
var table = document.getElementById("steamtable");
window.onload = function() {
for (var i = 0, row; row = table.rows[i]; i++) {
if (row.cells[2].innerText == "yes") {
row.cells[1].style.color = 'red';
row.cells[2].style.color = 'red';
row.cells[3].style.color = 'red';
}
}
}
So i'm trying to loop trough the table and if the cell containing the 'banned?' value equals 'yes' then i want change the url tag color of that row to red at all times (link, visited and hover).
Technically i know how to change the colors, i just dont know how to access the url tag in this scenario. The javascript i added just changes the colors of some cells, and that works totally fine.
any help would be appreciated.

It will work if you add the style to the a tag inside that cell
like so:
row.cells[0].querySelector("a").style.color = "green";
The querySelector selects an a element inside the cell
var table = document.getElementById("steamtable");
window.onload = function() {
for (var i = 0, row; row = table.rows[i]; i++) {
if (row.cells[2].innerText == "yes") {
row.cells[0].querySelector("a").style.color = "red";
}
}
}
<table border id="steamtable">
<tr id="header-row">
<th class="tableheaders" id="t_headersteamlink">steamlink</th>
<th class="tableheaders" id="t_headername">name</th>
<th class="tableheaders" id="t_headerbanned">banned?</th>
<th class="tableheaders" id="t_headerbandate">banDate</th>
<th class="tableheaders" id="t_headercreator">creator</th>
<th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>
<tr class="datarow">
<td >steamcommunity.com/id/example</td>
<td>exampleUser</td>
<td>yes</td>
<td>24/06/2021</td>
<td>exampleCreator</td>
<td>20/06/2021</td>
</tr>
</table>

Use getElementsByTagName to get a element by tag name.
row.cells[0] just is a HTML elements reference . Just find a tag inside this element and update the stag style as you did.
const table = document.getElementById("steamtable");
window.onload = function () {
for (let i = 0, row; row = table.rows[i]; i++) {
if (row.cells[2].innerText == "yes") {
row.cells[0].getElementsByTagName('a')[0].style.color = 'red';
row.cells[1].style.color = 'red';
row.cells[2].style.color = 'red';
row.cells[3].style.color = 'red';
}
}
}
<table id="steamtable">
<tr id="header-row">
<th class="tableheaders" id="t_headersteamlink">steamlink</th>
<th class="tableheaders" id="t_headername">name</th>
<th class="tableheaders" id="t_headerbanned">banned?</th>
<th class="tableheaders" id="t_headerbandate">banDate</th>
<th class="tableheaders" id="t_headercreator">creator</th>
<th class="tableheaders" id="t_headercreationdate">creationDate</th>
</tr>
<tr class="datarow">
<td >steamcommunity.com/id/example</td>
<td>exampleUser</td>
<td>yes</td>
<td>24/06/2021</td>
<td>exampleCreator</td>
<td>20/06/2021</td>
</tr>
</table>

table row as a counter in HTML

I would like to know how could I assign a table row an id which is systematically as a counter. It can be a string + a counter as follow:
<table>
<tr id="Row1"> # it can be only a number => id="1"
<tr id="Row2"> # it can be only a number => id="2"
<tr id="Row3"> # it can be only a number => id="3"
.....
<tr id="Row5000"> # it can be only a number => id="5000"
</table
Because I have thousands of rows and then could not assign id to them manually. This is why I want to assign them via XSLT. Does anybody know how could I do so? Thanks.

// javascript
var table = document.querySelectorAll('table tr');
{
for(var i=0;i<table.length;i++){
table[i].setAttribute("id",i+1);
}
//jquery
$("table tr").each(function(index,object) {
object.attr("id",(index+1));
})

$("table tr").each(function(i, tr) {tr.id = 'Row' + (i+1);})
explanation: you can find each tr in table and assign id for each one.

First you assign an id attribute to your table like this
<table id="mytable">
<tr></tr>
<tr></tr>
....
</table>
Then add a script at the bottom of your document
<script>
(function() {
var rows = document.getElementById("mytable").rows;
for(var i = 1; i <= rows.length; i++) {
rows[i-1].id = 'Row'+i;
}
})();
Its a pure javascript solution. No jQuery required.

Assign your table an id. here its newTable then iterate and set the attibute
<script>
function getit(){
$('#newTable').find('tr').each(function(index){
var x= this.setAttribute("id","Row"+[index]);
console.log(x);
})
}
</script>
hope that helped.

You Can Use This:
Your CSS
<style>
body {
counter-reset: section;
}
table tbody tr th::before {
counter-increment: section;
content: "Section " counter(section);
}
table tbody tr th::before {
content: counter(section);
}
</style>
Your Html
<table class="table">
<thead>
<tr>
<th colspan="6">
</th>
</tr>
<tr>
<th scope="col">#</th>
<th scope="col">f1</th>
<th scope="col">f2</th>
<th scope="col">f3</th>
<th scope="col">f4</th>
<th scope="col">f5</th>
</tr>
</thead>
<tbody>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
<tr>
<th class="align-middle" scope="row"></th>
<td class="align-middle">d1</td>
<td class="align-middle">d2</td>
<td class="align-middle">d3</td>
</tr>
</tbody>
</table>

Nesting table within Angular table

Let me start by saying that I am definitely new to Angular, but I have done a bit of digging and haven't found anyone else trying to do this with quite the same restraints.
I am attempting to create a nested table with the outer table containing rows of information from a JSON object. Beneath each row in this outer table, I need to generate another table that contains information from a JSON object retrieved using information from the outer table row. The problem I have is making sure that the information in the inner table is different for each row within the outer table. Right now, I'm running into an issue where I get the information for each an outer row displayed in every inner row for a brief moment before my script cycles through to the next outer row and changes the information for every inner row until the script reaches the end of the outer rows.
I'm working from an online application, with no true database access, hence the need to grab the data needed for the table from a URL.
Here are my scripts:
var projectApp = angular.module('projectEditor', []);
var parents = [];
projectApp.controller('ProjectController', [ '$scope', '$http',
function($scope, $http, msSvc) {
$scope.isLoaded = false;
$scope.loading = true;
$scope.url = '/api/now/table/';
$http.defaults.headers.common.Accept = "application/json";
$scope.updatePrjList = function() {
$http({
method: 'GET',
url: $scope.url + "pm_project?sysparm_query=active=true^ORDERBYDESCend_date&sysparm_limit=5&sysparm_display_value=true"
}).
success( function(data, status) {
$scope.loading = false;
$scope.isLoaded = true;
$scope.projects = data.result;
//parents.length = $scope.projects.length;
for (var i=0; i< $scope.projects.length; i++) {
parents.push($scope.projects[i].sys_id);
//console.log($scope.projects[i]);
}
$scope.updateMSList(parents);
}).
error( function(data, status) {
$scope.projects = [{"number": "Error fetching projects list"}];
});
};
$scope.updateMSList = function(msURL) {
console.log("URL: " + msURL);
for (var i=0; i< msURL.length; i++) {
$http({
method: 'GET',
url: $scope.url + "pm_project_task?sysparm_query=active=true^ORDERBYDESCend_date^parent=" + msURL[i] + "&sysparm_limit=5&sysparm_display_value=true"
}).
success( function(data, status) {
$scope.loading = false;
$scope.isLoaded = true;
$scope.milestones = data.result;
var i;
var l = $scope.milestones.length;
for (i=0; i< l; i++) {
//console.log($scope.milestones[i]);
}
}).
error( function(data, status) {
$scope.milestones = [{"number": "Error fetching milestones list"}];
});
}
};
$scope.updatePrjList();
}] );
});
<div class="container col-md-12" ng-app="projectEditor">
<div class="row" ng-controller="ProjectController">
<div class="panel panel-default">
<table class="table table-striped">
<thead>
<tr>
<th class="normal-cell col-md-1">Project</th>
<th class="normal-cell col-md-1">#</th>
<th class="normal-cell col-md-1">Percent Complete</th>
<th class="normal-cell col-md-1">Project Manager</th>
<th class="normal-cell col-md-1">Requestor</th>
<th class="normal-cell col-md-1">Portal/Application</th>
<th class="normal-cell col-md-1">State</th>
<th class="normal-cell col-md-1">Project Health</th>
<th class="normal-cell col-md-1">Target Date</th>
<th class="normal-cell col-md-1">Committed Date</th>
<th class="normal-cell col-md-1">Planned Impl. Date</th>
</tr>
</thead>
<tbody ng-show="isLoaded">
<tr ng-repeat="proj in projects">
<td colspan="12">
<table>
<tr>
<td class="normal-cell col-md-1"><a class="project-link" href="pm_project.do?sys_id={{proj.sys_id}}" style="color: #91b4c5; font-weight: 600;">{{proj.number}}</a><div>{{proj.short_description}}</div></td>
<td class="normal-cell col-md-1">{{proj.u_ranking}}</td>
<td class="normal-cell col-md-1"><pct-complete value="proj.percent_complete"></pct-complete></td>
<td class="normal-cell col-md-1">Test PM</td>
<td class="normal-cell col-md-1">Test Requester</td>
<td class="normal-cell col-md-1">Test Portal</td>
<td class="normal-cell col-md-1">{{proj.state}}</td>
<td class="normal-cell col-md-1">{{proj.u_health}}</td>
<td class="normal-cell col-md-1">Test Target</td>
<td class="normal-cell col-md-1">Test Commit</td>
<td class="normal-cell col-md-1">{{proj.start_date}}</td>
</tr>
<tr>
<table class="table table-striped col-md-12">
<thead>
<tr>
<th class="col-md-6 text-center">Project Description</th>
<th class="col-md-3 text-center">Milestone Name</th>
<th class="col-md-1 text-center">Planned Finish</th>
<th class="col-md-1 text-center">Actual Finish</th>
<th class="col-md-1 text-center">Status</th>
</tr>
</thead>
<tr ng-repeat="ms in milestones">
<td class="col-md-6">{{proj.description}}</td>
<td class="col-md-3">{{ms.short_description}}</td>
<td class="col-md-1">{{ms.start_date}}</td>
<td class="col-md-1">{{ms.end_date}}</td>
<td class="col-md-1">{{ms.state}}</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>