Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table.

Is there a way to achieve this?

This is how I implemented it:

HTML

<section>
        <table style="font-family: arial, sans-serif;  border-collapse: collapse; width: 100%; table-layout: fixed;">
            ... Table content goes here ...
        </table>

CSS

... CSS styling rules go here ...

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="/js/jquery.js"></script>
        ... JavaScript functionality goes here ...

The result can be seen in the following image: https://i.stack.imgur.com/xwvGV.jpg

Thank you for any assistance.

Edit: I would like to display the JSON data as follows:

{ "MessageBody": { "IdGateway": "002", "MsgId": "a8beaabe-80da-4721-bc67-7983ee87d516", "Timestamp": "1579516070021", "Version": "1.0", "Period": "300000", "SensorsStatus": [ { "SensorId": "status", "SensorValue": "0" } ] }, "Topic": "CERT / 01234 / GICS / STATUS / 002" }
javascripthtmlcssrazor-pages

Answer №1

Don't forget to use the <pre> tag after inserting code. It will display the original text.

table, th, td {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td><pre>{
     "MessageBody": {
         "IdGateway": "002",
         "MsgId": "a8beaabe-80da-4721-bc67-7983ee87d516",
         "Timestamp": "1579516070021",
         "Version": "1.0",
         "Period": "300000",
         "SensorsStatus": [
             {
                 "SensorId": "status",
                 "SensorValue": "0"
             }
         ]
     },
     "Topic": "CERT / 01234 / GICS / STATUS / 002"
}</pre></td>
  </tr>
</table>

UPDATE: Make sure to include the code snippets inside the table.

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

Uploading files on a web page using AJAX technology

I'm attempting to perform a file upload on an ajax response page. The main.php file contains basic ajax code as shown below: <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if ...

phpjavascriptajaxxmlhttprequest

Locate a piece of text with jQuery and enclose it within a specified container

Check out this code <form method="get" name="form_delivery"> Pick the country where you want your delivery<br> <select name="deliverymethod"> <option value="0" selected="selected">Choose a country / region</option> ...

javascriptjqueryhtml

How can you navigate a self-referencing one-to-many table in Sequelize to find the parent, the parent of the parent, the parent of the parent of the parent, and

I have a model called DriveObject, which has a self-referencing foreign key named parentId For the backend, I am utilizing express and node.js In my code, I have defined the association as follows: driveObject.hasMany(driveObject, { as: 'Children&ap ...

javascriptmysqlnode.jsexpresssequelize.js

How can this JSON function correctly?

Hey there! I've been trying really hard to receive a response from PHP and based on that response, perform different actions. However, I seem to be facing some challenges with handling the output from the PHP file. Below is a snippet of my index file: ...

phpjavascriptjqueryjson

Guide to making a Java Servlet for a specific jQuery.ajax () request?

In one of my files named wfd.proxy.js, I have the following code snippet: if (!WFD) { var WFD = {}; }; if (!WFD.Proxy) { WFD.Proxy = {}; }; WFD.Proxy = { SERVICE_URL : "/delegate/WFD/WFService?", PDF_SERVICE_URL : "/delegate/pdf-exporter?", ...

javajavascriptjqueryajaxjson

Conceal a div while revealing the other div

I am currently trying to achieve a unique visual effect. I have three divs named div1, div2, and div3. The objective is for div1 to slide up and disappear when clicked, while div2 simultaneously slides up and becomes visible. Similarly, when div2 is click ...

javascriptjqueryhtmlcss

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

Imagine I have two connected Redux components. The first component is a simple todo loading and display container, with functions passed to connect(): mapStateToProps reads todos from the Redux state, and mapDispatchToProps requests the latest list of todo ...

javascriptreactjsecmascript-6reduxreact-redux

Navigating through different states and managing the URL manually can be a breeze with AngularJS

In my current setup using the meanjs stack boilerplate, I am facing an issue with user authentication. When users log in, their state remains 'logged-in' as long as they navigate within the app starting from the base root URL '/'. This ...

javascriptnode.jsangularjsexpressmeanjs

The clearing of sessions is not supported by Node.js / Express.js

At the start, the application loads some users using Angularjs / $http.get(). As you scroll down, more users are loaded dynamically (infinite scroll). In addition to this, there are location filters on the page. Users can select a different Country and Ci ...

javascriptangularjsnode.jssessionexpress

Various inline SVG elements not rendering properly on HTML page

I have converted several PDF files to SVG using a tool called pdftocairo. These SVG files can be viewed in a browser without any issues. You can find one of the SVG files here. However, when I try to embed multiple different SVG files into the same HTML ...

htmlsvg

Error encounter in JSP is nested within another JSP file, both of which utilize jQuery

Before proceeding, it is important to note that I am in the process of selecting a month using a datepicker and a specific meter (by its serial number). Once this information is selected, a query will be sent to a MySQL database to retrieve data for plotti ...

javascriptjqueryjspdatepicker

Tips for disabling automatic sliding in Bootstrap 5 carousel specifically on larger screens

I am working with a Bootstrap 5 carousel that I need to configure to stop autosliding on large screens, but maintain autoslide functionality on mobile devices. Is there a way to achieve this using only HTML and CSS/SCSS? I am aware of the data-bs-interval ...

htmlcsssasscarouselbootstrap-5

I am experiencing difficulty with the color of my progress bar in Firefox

After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default ...

javascriptcsshtmlfirefox

Utilize a pre-defined layout in a Vue component that is sent as a property

As a complete beginner, I kindly ask for your patience as I navigate through the coding basics. I am looking to utilize a template specified in the prop. The template is located within the DOM. My intention for approaching it this way is to reuse the comp ...

javascriptvue.js

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

javascriptjqueryangularjshtml

Creating a dynamic quiz with random images using text boxes in HTML and PHP

I am working on creating a 'guess the picture' style quiz where a random image is displayed as the question, and users must input their answer in a textbox. The question will be selected randomly from 3-5 options each time the page is refreshed o ...

javascriptphphtmlarraystextbox

Utilizing special symbols using the Net::Twitter::Lite library

When I attempt to send characters like ü, ä, ß, à, and others to Twitter, they appear incorrectly. Using unicode characters in my scripts results in the characters displaying wrong on Twitter. Even when utilizing HTML (which has previously worked in Tw ...

htmlperltwitterunicode

Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue. it('verifies pre ...

javascriptselenium-webdriver

Retrieve the property of an object from within an array

I am dealing with an array structure like this: const arr = [{ name: 'One', id: 1 }, { name: 'Two', id: 2 } ]; My goal is to extract and return the name of the object if its id matches a certain value. After exp ...

javascriptecmascript-6

Coloring a table in vue.js based on performance rankings

I'm facing an issue with sorting my data performance in vue js. Here is the script I have created so far: <template> <div> <div class="row"> <h2> Campaign Performance </h2> <table class=&q ...

javascripthtmlvue.js