Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

I am currently using a JavaScript file that was created for me to update form data based on user selections and display radio buttons along with the corresponding costs.

Although the inline CSS in this script works perfectly fine in Chrome and Firefox, it seems to fail in Safari, Internet Explorer, and Opera.

I cannot figure out why it is not functioning properly across all browsers or how to resolve this issue to ensure consistent performance.

Any insights or suggestions would be greatly appreciated.

function update(sqin,name) {
    $('#display_size').html(name);
    str9 ="<table  style='margin-left:10px;float:left;'>";
    for (index = 0; index < prices[sqin].length; index++) {
        var qty = prices[sqin][index][0];
        str9 += '<tr><td style="padding-top:5px;width:90px;"><input type="radio" id="radio_btn" name="productpr1" VALUE="'+qty+':'+prices[sqin][index][1]+
        '<label for="radio_btn"><span style="font-family: \'Open Sans\', serif;font-size: 20px;">'+qty+'</span></label>'+
    '</td><td style="font-family: \'Open Sans\', serif;font-size: 20px; padding-top:5px;">$'+prices[sqin][index][1]+'</td></tr>';

        if (index == 4) {
            str9 += "</table><table style='margin-left:175px;'>";
        }

    }
    str9 += "</table>";
    $('#price_table').html(str9);

    $('[name="product1[]"]').val("ea "+name+" Die-Cut Decals");

Answer №1

Click on this link to access a helpful FIDDLE.

CSS Styles:

table {
    width: 300px;
}
span {
    color: red;
}
table tr:first-child td {
    background-color: #c0bdbd;
    font-size: 18px;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
}
table td {
    padding-left: 30px;
}
table tr:last-child td {
    font-size: 20px;
    color: white;
    background-color: red;
    padding: 8px;
    text-align: center;
    border-radius: 5px;

}

Edit: There are multiple ways to approach this scenario:

  1. Following your colleague's lead and incorporating EVERYTHING into JavaScript - HTML, CSS, and JS - for display purposes.

  2. Putting the HTML in JavaScript and applying fixed CSS styling within the <style></style> section of your header or an external CSS file.

  3. Setting up the HTML structure with fixed styling, using CSS either inline or in an attached stylesheet, then utilizing JavaScript solely for populating data. This is demonstrated above.

The choice among these three approaches depends on your specific application needs and personal preference. Personally, I avoid using inline CSS styling with JavaScript as it can make the code complex and hard to follow, especially for others reviewing it. Upon examining the code in your question with extensive inline styling, it was overwhelming.

Whenever possible, it's best to first construct the foundation (HTML), apply aesthetics, design elements, colors, and layout (CSS), and then introduce interactivity and functionality (JavaScript) like automating home tasks.

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

Access array information using AngularJS

Sorry for any language issues. I am trying to figure out how to extract an array data from AngularJS in order to save it using Node.js. This is my AngularJS script: angular.module('myAddList', []) .controller('myAddListController&apos ...

Utilizing SlickGrid and DataView for calculating totals efficiently without the need for grouping

I am attempting to utilize Slick Grid and DataView to calculate column totals similar to the example shown here: . However, I do not want to group my rows. Therefore, I attempted not passing a getter and formatter into the dataView.setGrouping(..) method. ...

Sections that intersect one another

The 'home-screen' section overlaps with every other section. You can check out the live link here: Hello Sylhet. However, the page should actually look like this: https://i.sstatic.net/VQwG4.jpg ...

Enable wp_star_rating for display on the front end

My goal is to incorporate the wp_star_rating function into a shortcode for use on the frontend of my WordPress website. To achieve this, I have copied the code from wp-admin/includes/template.php to wp-content/themes/hemingway/functions.php. I have includ ...

Is it possible to loop through a directory containing images and dynamically generate a CSS rule that positions each image based on its

I'm not very familiar with PHP so I could use your expertise in coming up with the most efficient and straightforward solution for this specific task. In my directory "path/images/headers," I have multiple header images all cut to the correct size, ea ...

Assistance needed with utilizing jQuery for checkboxes and arrays

Greetings! I am struggling to retrieve the names and values of checked checkboxes and store them in an array named selected. Despite several attempts, I have not been able to get it working as intended. Below is my code snippet, any assistance in identif ...

What is the most effective method for developing HTML with PHP or Jquery?

My JavaScript Object contains some important information that I need to display. I have two possible options for generating the HTML from this object. I am unsure which method is the most appropriate, or if it is simply a matter of personal preference. 1 ...

Encountering a syntax error while utilizing a JavaScript variable in a jQuery selector for a lightbox feature

I'm currently working on creating a lightbox feature and have reached the stage where I am implementing next and previous buttons to navigate through images. I am utilizing console.log to check if the correct href is being retrieved when the next butt ...

Executing a Javascript function through Typescript in an Ionic application

I integrated a plugin into my ionic project, which includes both Java and JS code: cordova.define("cordova-sms-plugin.Sms", function(require, exports, module) { 'use strict'; var exec = require('cordova/exec'); var sms = {}; functio ...

React Module cannot be found: Error: Unable to locate - import paths

New to coding and currently working on a website using React. Encountering three errors persistently: ERROR in ./src/Components/Pages1/Home.js 6:0-50 Module not found: Error: Can't resolve './Components/Cards/Cards1.js' in 'C:\Use ...

Determining the navigation changes within a React browser

Hi there, I'm using browserHistory.goForward() and browserHistory.goBack() to navigate forward and backward in my app with arrow buttons. However, I need a way to determine if the route has actually changed after executing browserHistory.goForward/goB ...

Utilizing the Ajax success callback to trigger a subsequent Ajax request as the loop iterates

I am currently working on a piece of javascript/jquery code that involves making ajax requests. The code snippet I have includes various variables and functions for handling external data sources and templates. var trigger = $('#loadTabl ...

Encountering issues with AJAX requests using jQuery

Hey there, I'm attempting to make an AJAX call in a C# page and I'm running into some issues. Below is my jQuery code: $(document).ready(function () { $.ajax({ type: "POST", url: "conteudo.aspx/GetNewPost", data: { i ...

Configuring Google Chart LineChart settings by utilizing the series attribute

I am looking to modify the options for my line chart. However, when I define the options as shown below, the first series setting gets ignored and only the second series property is applied. var options = { title: 'Temperature Graph ( sampling ev ...

What is the best way to update a page and retrieve fresh data from a service in Angular?

On my webpage, there is a table and two charts coming from three different controllers. I am looking for a way to refresh all of them simultaneously by clicking on a single refresh button. This will allow the data to be fetched from the webservice again an ...

How can I showcase images stored in an array using JavaScript?

I am currently developing a role-playing game (RPG). In order to enhance the gameplay experience, I am trying to implement a for loop that will dynamically generate buttons on the screen. Here is the code snippet I have created so far: $(document).ready(f ...

Ways to include additional bars in your Animated jQuery, CSS, and HTML Bar Graph

I found this awesome website that explains how to create an animated bar graph using HTML, CSS, and JQuery. I want to implement it in my web application to display monthly statistics for each of the 7 divisions in my company. However, I'm having troub ...

Struggling with loading react storybook

I am having trouble getting my storybook app to start. It is stuck in a loading state with no errors showing in the console. Can anyone help me figure out what I am doing wrong? Check out the screenshot here storybook/main.js const path = require(' ...

I'm currently facing difficulties trying to implement AJAX with JavaScript and PHP as the desired output is not being

My query is quite straightforward - why isn't the code functioning properly? I am attempting to have the text echoed in PHP displayed inside a div with the ID of "show". Interestingly, this works with a txt file but not with PHP or any other type of f ...

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...