Using JavaScript to Align HTML Data to the Right or Left

I have successfully created an HTML table from JSON data and formatted it using JavaScript as required.

However, I am facing a challenge with right-aligning all the amounts coming from my JSON data. I want all the numbers to be aligned to the right but I'm unable to achieve that.

Below is my JavaScript code along with the JSON data:

var data = [
            {
                "amount": 476426,
                "billdate": "2018-09-01",
                "outlet": "JAYANAGAR"
              },
              // Other JSON data entries here...
];

// The rest of the JavaScript code for formatting the data and rendering the table goes here...

I am struggling to figure out how to align the numbers to the right, including the "Total" at the end which I also want to be bold.

For reference, you can view the fiddle here.

javascripthtmlcss

Answer №1

utilize the bootstrap classes text-right or text-center for th and td

var info = [
            {
                "amount": 476426,
                "billdate": "2018-09-01",
                "outlet": "JAYANAGAR"
              },
              {
                "amount": 92141,
                "billdate": "2018-09-01",
                "outlet": "MALLESHWARAM"
              },
              ...
                     let formatData = function (info) {

                         let billdates = [];
                         let outlets = [];
                         data.forEach(element => {
                             if (billdates.indexOf(element.billdate) == -1) {
                                 billdates.push(element.billdate);
                             }
                             if (outlets.indexOf(element.outlet) == -1) {
                                 outlets.push(element.outlet);
...
                           table.classList.add("table");
                           table.classList.add("table-bordered"); 
                           table.classList.add("text-center");
                           
                     };
                     let formattedInfo = formatData(info);
                     renderTable(formattedInfo);
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div id="tbl"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Selenium Webdriver to efficiently scroll through a webpage with AJAX-loaded content

I am currently utilizing Selenium Webdriver to extract content from a webpage. The challenge I'm facing is that the page dynamically loads more content using AJAX as the user scrolls down. While I can programmatically scroll down using JavaScript, I a ...

javascriptajaxseleniumscrollwebdriver

I can't see any tools anywhere on my page in Literally Canvas

My Implementation: <!DOCTYPE html> <html lang="en"> <head> <title>Creative Drawing Tool</title> <link href="css/creative-drawing-tool.css" rel="stylesheet"> <script src="jquery-2.1.4.min.js"></scrip ...

htmlcanvasdrag-and-dropdrawing

How can Vue allow for text selection to be encapsulated within a span element with two-way binding for styling

I have developed an application that allows users to highlight text with different colors while reading. For this functionality, I am utilizing the Selection API. However, I am encountering issues with the two-way binding aspect. When a user changes the c ...

javascriptvue.jsvuejs2

What is the best way to divide widgets in a Wordpress Sidebar?

I am looking to customize the spacing between widgets in my Wordpress sidebar, similar to what is shown on this example site. Currently, my sidebar does not have the desired spacing. I have tried various CSS codes found online, but none of them seem to be ...

htmlcsswordpresssidebar

Having trouble with installing NPM and ng commands, neither of them is working. I may have to uninstall everything and begin from scratch

Learning Angular and how to use the terminal is all new to me. I recently installed NPM and attempted to use ng serve, but encountered a series of issues. At this point, I am considering completely uninstalling everything so I can start fresh. I've d ...

javascriptnode.jsnpmterminalnvm

Is there a way to execute a condition in a Vue component before rendering the HTML in the template?

Here is an example of my Vue component: <template> <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog"> ... <div class="modal-header"> <h4 class="modal ...

javascriptvue.jsvuejs2vue-componentvuex

Is randomly pairing 2 datapairs after slicing a JSON array easy or challenging?

There is a JSON file containing an unlimited number of users [{ "fname": "Hubert", "lname": "Maier", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bd ...

javascriptarraysjson

How can we stop the anchor jump caused by a third-party script?

I'm currently utilizing a third-party script (details provided below) to divide a form into multiple ajax'd pages. However, when I attempt to move on to the next page, it immediately jumps to an anchor at the top of the form. This behavior is unn ...

javascriptjqueryhtmldrupalanchor

jQuery encountering an issue with parsing JSON data (error message displayed)

Upon reviewing similar questions, it seems that most issues arise from either invalid JSON or incorrect headers on the XMLHttpRequest. My case, however, does not seem to fall into either of those categories. I have a reliable JSON server at my disposal. Y ...

javascriptjqueryjson

Creating a Sleek Horizontal Scroll Functionality for Multiple Rows with Bootstrap 5

The container allows scrolling for only half of its content. Afterwards, scrolling affects the navigation panel as well. CSS: .horizontal-scrollable { overflow-x: auto; white-space: nowrap; } HTML: <div class="container hori ...

cssbootstrap-4flexboxbootstrap-5bootstrap-grid

My attempts to use media queries are being ignored by Internet Explorer

While other browsers recognize and function properly, it seems like IE is not recognizing my media queries. Could there be something wrong with my code? I've created a similar design before without any issues, so why is this one causing problems? Her ...

htmlcssinternet-explorermedia-queries

Getting React Developer Tools to Function with Webpack

I recently followed a tutorial on how to expose React as a global variable in Webpack using the Expose module. Despite installing the Expose module and adding the appropriate loader configuration in the webpack.config.js file, I am still unable to access R ...

javascriptreactjsnpmwebpackdeveloper-tools

internet explorer 11 not properly aligning text to center

I've encountered an issue with center-aligning a canvas and overlapping image on different browsers. While Chrome and Firefox display it correctly, Internet Explorer does not cooperate. The canvas is not centered, but the image is. I've tried var ...

javascripthtmlcssinternet-explorer

Issue with unordered list item styling in CSS

Encountered a peculiar problem: Within my .cshtml file, there is another element: <ul> <li>Test</li> <li>Test2 <ul> <li>Test3</li> </ul> </li> <li>Tes ...

htmlcss

What is the most effective method for resetting the scroll position of a browser when refreshing a page?

Portfolio Query I am in the process of setting up a basic portfolio website. My navigation bar includes various links, one of which is labeled "About Me". Upon clicking this link, the page immediately jumps to a specific section with an element ID of #abo ...

javascriptjqueryhtmlcss

Utilizing a lone div for clearing a float

For a long time, my go-to method for clearing floats has been using <div style="clear:both;"></div>. However, I recently began wondering if in HTML as XML, could I simply use <div style="clear:both;" /> since they essentially serve the sa ...

htmlcssxml

Auto-stop the EC-2 instance after a specified period of time utilizing SDK

Is it possible to automatically terminate an EC-2 instance after a specific time, such as 2 hours from when it was created? I am currently utilizing NodeJS for my AWS EC-2 operations. Is there a specific parameter that needs to be included when creating ...

javascriptnode.jsamazon-web-servicesamazon-ec2

Utilize Javascript to extract data from arrays with multiple dimensions

If I have an array structured as follows: Let data = [ [bob, male, 90, pass][sam, male, 70, pass][grace, female, 75, pass][harry, male, 20, fail] ] and I am looking to extract all the names and store them in a separate array, how can this be achieved? Th ...

javascriptnode.jsarraysloopsmultidimensional-array

Creating a line graph using chart.js and JSON dataset

I'm working on plotting a line graph using a JSON response from my MongoDB, but I keep encountering an error that indicates something might be wrong with my code structure. Here's what I have attempted: myurl = "/api/humidity" $(function() { ...

javascriptjsonmongodbchart.jslinechart

Dealing with incorrect routes found in both documents

In my current project, I am facing an issue where I need to handle invalid routes and display a message in Node.js. I have two separate files, one for users and one for tasks. If a user accesses a route that does not exist, I want to show an error message ...

javascriptnode.jsjsonexpressroutes