Is there a way to show a progress bar that functions as the background for a table row

My table is structured as follows:

th1    th2    th3    th4    th5    th6
td1    td2    td3    td4    td5    td6
td1    td2    td3    td4    td5    td6

I am looking to incorporate a feature where new rows are dynamically added using a form that triggers a background process to calculate the values in each td. This process has a duration of 10-60 seconds.

Instead of having a progress column, I want to visually represent the completion percentage by shading the entire tr.

For instance:

th1    th2    th3    th4    th5    th6
$ 1    $ 2    $ 3    $ 4    $ 5    $ 6   [100% completed, full row shaded in light green]
$ -    $ -    $ -    $ -    $ -    $ -   [40% completed, 40% of row shaded in light green]

Shading only:

th1    th2    th3    th4    th5    th6
||||||||||||||||||||||||||||||||||||||   [100% completed, full row shaded in light green]
|||||||||||||||                          [40% completed, 40% of row shaded in light green]
|||||||||                                [25% completed, 25% of row shaded in light green]
||||                                     [10% completed, 10% of row shaded in light green]

What approach would you suggest?

Below is a sample markup for reference:

<table>
    <thead>
        <tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th><th>th5</th><th>th6</th></tr>
    </thead>
    <tbody>
        <tr data-progress="100"><td>$1</td><td>$2</td><td>$3</td><td>$4</td><td>$5</td><td>$6</td></tr>
        <tr data-progress="40"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="25"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
        <tr data-progress="10"><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td><td>-</td></tr>
    </tbody>
</table>
javascripthtmlcssajaxhtml-table

Answer №1

My solution requires an additional div in the first td of each tr, adding a cool visual effect. Although it still has room for improvement, the concept is clear...

DEMO http://jsfiddle.net/CBJjv/2/

Execute this function after updating the values of data-progress.

var updateProgress = function () {
    var trs = document.querySelectorAll('.table-body tr');
    for (var i=0; i<trs.length; i++) {
        var tr = trs[i];
        var pr = tr.querySelector('.progress');
        pr.style.left = (tr.dataset.progress - 100)+'%';
        pr.style.height = tr.clientHeight + 'px';
    }
}

Rather than adjusting position, consider using a fixed position and altering the width of the div

This method is functional in Chrome, but compatibility with other browsers has not been verified.

Answer №2

If you're on the hunt for a stylish solution, consider customizing your tr element to create a progress bar. To illustrate, here's how you can make a progress bar at 40%:

<tr style="background-image: linear-gradient(to right,lightgrey 40%,white 40%)">

Check out this example: https://codepen.io/drspa44/pen/rYEzWj

Answer №3

While I do agree with the idea of placing a background image on the tr element, it is important to note that making this change will require adjusting the display of the tr itself. Additionally, it's worth noting that utilizing background percentages may not always yield the expected results. It may be best to avoid using percentages for the background image position and opt for pixels instead. To determine the appropriate width for your table, you can calculate the percentage required and then convert it into pixels accordingly.

td { 
    display: block; 
    background: transparent url(shade-of-grey.gif) no-repeat scroll 0 0; 
}

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

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject

Ways to extract individual values from a Json Array and utilize them individually

I have a JSON data structure that I need to parse and separate each field into different arrays, so that I can use them individually. For instance, I want to split my data into two rooms: room 1 and room 2. After separating the data, I need to format it a ...

javascriptjqueryjson

Verify if an item is already present in the HTML document before adding a new item to it using Ajax

I am working on a page that displays a list of new students with the option to accept or reject them. The list can be updated in two ways - by manually refreshing the page, or through an Ajax method that automatically updates the list when a new student re ...

jqueryhtmlajaxasp.net-mvc

How to update an Array<Object> State in ReactJS without causing mutation

In my program, I store an array of objects containing meta information. This is the format for each object. this.state.slotData [{ availability: boolean, id: number, car: { RegistrationNumber : string, ...

javascriptreactjstypescriptimmutability

Loop through each current value in an ng-repeat directive and use it in an

I'm facing a simple issue that doesn't seem to have an easy fix. I have a ng-repeat set up like this <p ng-repeat="title in Menu.data[Menu.selected]"> {{ title }} </p> Now, I want to add an onclick event so I adjusted i ...

javascriptangularjsangularjs-ng-repeat

The error message you are encountering is: "Error: Unable to find function axios

Can't figure out why I'm encountering this error message: TypeError: axios.get is not functioning properly 4 | 5 | export const getTotalPayout = async (userId: string) => { > 6 | const response = await axios.get(`${endpoint}ge ...

javascripttypescriptaxiosjestjs

Is it possible to conduct an auction in JavaScript without using the settimeout or setinterval functions?

I'm currently working on creating an auction site and I need help improving its speed and performance. I've been using setInterval and setTimeout functions for the countdown, but it's quite slow as a request is sent to the server every secon ...

phpjavascriptnode.jssocket.io

What are the potential drawbacks of relying heavily on socket.io for handling most requests versus using it primarily for pushing data to clients?

Is it advisable to switch AJAX routes (called with $.Ajax in jquery) like: GET /animals GET /animals/[id] POST /animals To socket.io events (event bound on client and server for client response): emit("animals:read") emit("animals:read", {id:asdasd}) ...

javascriptajaxnode.jssocket.io

The JavaScript function getSelection is malfunctioning, whereas getElementById is functioning perfectly

I am encountering a peculiar situation while trying to input text into a textbox using a JavaScript command. The CSS locator does not seem to update the text, whereas the ID locator is able to do so. URL: Below are screenshots of the browser console disp ...

javascriptseleniumselenium-webdriver

Failed Ajax call! Utilizing Jquery to send a basic request with the .ajax function

Below is the jquery code snippet used to invoke the ajax function: function sendAjax(type, succ){ //where succ denotes the success callback if (type=="") { $("#txtResp").empty(); return; } if(succ === undefined) { succ ...

ajaxjqueryjquery-selectors

What could be the reason for the data being retrieved but not showing up on the web page?

When fetching data from an API, I encounter a problem where the Loader displays but the data never shows up on the page. The inconsistency of this behavior is puzzling to me. This issue seems to be more prevalent on smartphones than on computers. useEffec ...

javascriptreactjsaxiosfetchjsx

Handling onChange events for several typescript <Select> elements

As a non-TS developer, I'm delving into the realm of multiple selects and dropdown menus with Material-UI's select component. Progressing from a basic setup, I successfully implemented a single select but now face a challenge in adding another dr ...

javascripttypescriptmaterial-ui

Tips for personalizing Material-ui Table Row and Column Designs (Sticky)

I find myself in a unique predicament where I require not only the header, but also the first row and first three columns to stay fixed when scrolling vertically and horizontally due to an abundance of columns. While Material UI Table allows for the heade ...

html-tablematerial-uicss-tables

What is the best way to add selected values from a multi-select dropdown into an array?

Attempting to populate an array from a multiple select dropdown, I've encountered an issue. Despite using splice to set the order of values being pushed into the array, they end up in a different order based on the selection in the dropdown. For insta ...

javascriptjqueryhtmlarraysdrop-down-menu

When a base html tag is dynamically added, the browser mistakenly loads assets twice

When managing relative paths on a website, I utilize the <base> tag within the <head> section of each page. Although all resources loaded via relative-like paths in the documents are displayed correctly, my observations show that browsers such ...

javascriptjqueryhtmloffline-browsing

Resolving Problems with Ion-Split-pane in the Latest Versions of Angular and Ionic

There seems to be a perplexing issue with the ion-split-pane element that I just can't wrap my head around. Once I remove the split-pane element, the router-outlet functions perfectly fine. The navigation is displayed after a successful login. The on ...

cssangulartypescriptionic-frameworkmobile

What is the process for verifying an email address using the deep-email-validator package from npm?

I'm looking to verify the existence of an email address used for registration on my website, ensuring it's not just a temporary one. How can I achieve this utilizing the npm deep-email-validator package? Within my HTML page, I've assigned n ...

javascriptnode.jsnpmemail-validation

Shadows for directional light in three.js

http://jsfiddle.net/wp6E3/3/ var camera, scene, renderer; var cubes = []; init(); animate(); function init() { scene = new THREE.Scene(); scene.add(new THREE.AmbientLight(0x212223)); for (var i = 0; i < 10; i++) { var cubeGeomet ...

javascriptthree.jsshadowlight

The efficiency of React Context API's setters is remarkably sluggish

I have a goal to implement a functionality where the background gradient of a page changes depending on whether the child's sublinks are expanded or collapsed. To achieve this, I am using the useContext hook. However, I've noticed that although e ...

javascriptreactjstypescriptstatereact-context

Is it possible to access the HTML template prior to Outlook applying any additional classes during rendering?

I recently received an email template created in a different platform via Outlook. I am attempting to recreate this email in the Salesforce Marketing Cloud Platform, but I am encountering numerous unnecessary tables, classes set by Outlook (MsoNormal, Ms ...

htmlcssoutlookhtml-emailsalesforce-marketing-cloud