Develop Reference

Is there a way to use JavaScript Object with Bootstrap Tables

I am trying to create a covid-19 tables with bootstrap tables I want to display cases newcases death newdeath, But I'm not sure if I can use JavaScript Object to display number.
I add the script <script src="/module/index.js"></script> after the footer.
Github Repo: https://github.com/drjoeycadieux/covid-virus.git
index.js
document.getElementById("cases").innerHTML = cases;
document.getElementById("newCases").innerHTML = newCases;
document.getElementById("death").innerHTML = death;
document.getElementById("newDeath").innerHTML = newDeath;
const dailyOverview = [
{
date: '2021-09-09',
cases: 395155,
newCases: 703,
death: 11297,
newDeath: 1,
},
];
index.html
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Covid-19 Canada</th>
<th scope="col">Quebec</th>
<th scope="col">Ontario</th>
<th scope="col">Manitoba</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cases</th>
<td id="cases"></td>
<td id="newCases"></td>
<td id="death"></td>
<td id="newDeath"></td>
</tr>
<tr>
<th scope="row">newCases</th>
<td id="newCases"></td>
<!-- <td>Thornton</td>
<td>#fat</td> -->
</tr>
<tr>
<th scope="row">Death</th>
<td id="death"></td>
<!-- <td>the Bird</td>
<td>#twitter</td> -->
</tr>
<tr>
<th scope="row">newDeath</th>
<td id="newDeath"></td>
<!-- <td>the Bird</td>
<td>#twitter</td> -->
</tr>
</tbody>
</table>

There are a lot of things that need to be fixed or changed or added to the HTML and the JS, but essentially you want to do something like this.
const dailyOverview = [{
date: '2021-09-09',
cases: 395155,
newCases: 703,
death: 11297,
newDeath: 1
}];
// dailyOverview[0] gets the first object, wrapped in braces {}.
// dailyOverview[1] would get the second object in braces.
// adding '.cases', '.newCases', etc. gets the property you want.
document.getElementById("cases").innerHTML = dailyOverview[0].cases;
document.getElementById("newCases").innerHTML = dailyOverview[0].newCases;
document.getElementById("death").innerHTML = dailyOverview[0].death;
document.getElementById("newDeath").innerHTML = dailyOverview[0].newDeath;
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Covid-19 Canada</th>
<th scope="col">Quebec</th>
<th scope="col">Ontario</th>
<th scope="col">Manitoba</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cases</th>
<td id="cases"></td>
<td id="newCases"></td>
<td id="death"></td>
<td id="newDeath"></td>
</tr>
<tr>
<th scope="row">newCases</th>
<td id="newCases"></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Death</th>
<td id="death"></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">newDeath</th>
<td id="newDeath"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
You'll have to figure out how to loop through all the objects in your data and apply them to the table.
Create separate questions if necessary. Most of this has already been asked and answered here. There are also prebuilt JS libraries that could help. (You'll have to search for those. Asking about libraries isn't allowed on SO.)

How can I hide <tr> if it's <td> is empty

I have a table that gets data outputted to it dynamically based on data that is being pulled from my database. I have three hard coded <tr> but I want to hide them if there isn't any data outputted to their <td> from the database.
This is my HTML
<table class="table text-light text-end" id="data_table">
<thead>
<tr>
<th></th>
{{#each response4}}
<th class='title' scope="col">{{commodity}}</th>
{{/each}}
<th scope="col">Total</th>
</tr>
</thead>
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
{{#each response6}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UEM</th>
{{#each response4}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
<tr>
<th scope="row">UT</th>
{{#each response5}}
<td class="whole">{{fb_plus_fr}}</td>
{{/each}}
</tr>
</tbody>
</table>
This is an example I pulled from the inspect tool when the page loads and gets data from the database. The first <tr> doesn't have any <td> and should be hidden.
<tbody class="text-end">
<tr>
<th scope="row">AUX</th>
</tr>
<tr>
<th scope="row">UEM</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
<tr>
<th scope="row">UT</th>
<td class="whole">8215</td>
<td class="whole">5367</td>
<td class="whole">31193</td>
</tr>
</tbody>
This is how I'm attempting it but this doesn't work. It won't hide that first that doesn't have any data. Any advice on how to fix this is greatly appreciated!
window.onload = () => {
$("#data_table > tbody > tr ").each(function () {
if ($(this).find('td').is(":empty")){
$(this.hide())
}
})
};

This code may help you:
<tr th:if="${yourtable.empty}">
<td colspan="2">No Content Available</td>
</tr>

I think the easiest way to go about this would be to have an if block wrapped around the <tr> that checks if the data is empty before displaying the <tr>.

How to make two column to repeat for one item in the list?

Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.

You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/

You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>

You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>

How do you sort for row details in HTML?

I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)

I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>

how to make column editable in table column with angularjs?

Is it possible to make a tablecolumn editable when using angularjs? I have this table:
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td>{{person.id}}</td>
<td>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>
So I have a $scope.fileNames which is an array containing filenames per person for example:
["Koala.jpg","Tulips.jpg","Tulips.jpg","Hydrangeas.jpg","Lighthouse.jpg","Chrysanthemum.jpg"]
I would like to make this 2nd column editable for the user so he can change/delete the files how can I accomplish this?

Use contentEditable
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td contentEditable>{{person.id}}</td>
<td contentEditable>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>