Transforming a div table into a standard table

I recently inherited a project from another developer who used divs to create tables. My task now is to export these "tables" to Excel. However, the issue is that these are not traditional HTML tables; they are essentially styled divs mimicking table structures.

Is there a method to convert these pseudo-tables into actual HTML tables for exporting to Excel? Or is it possible to directly export these div-based tables to Excel?

Here's an example snippet of what I'm working with:

<div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
</div>
javascriptjqueryhtmlcssexport-to-excel

Answer №1

If you want to dynamically create a table using JavaScript, you can loop through all the elements with classes ".row" and ".column" within a specific div, populate the table, and then replace the original div with the new table. Below is a quick example I put together:

var body=document.body,
    parent=body.querySelector(".table"),
    rows=parent.querySelectorAll(".row"),
    table=document.createElement("table"),
    tbody=document.createElement("tbody"),
    row=document.createElement("tr"),
    cell=document.createElement("td"),
    x=rows.length,
    cells=rows[0].querySelectorAll(".column"),
    y=cells.length,
    i,j;
table.appendChild(tbody)
for(i=0;i<x;i++){
    row=row.cloneNode(0);
    cells=rows[i].querySelectorAll(".column");
    y=cells.length;
    for(j=0;j<y;j++){
        cell=cell.cloneNode(0);
        cell.innerHTML=cells[j].innerHTML;
        row.appendChild(cell);
    }
    tbody.appendChild(row);
}
body.appendChild(table);
//body.removeChild(parent);
table{
    color:#f00;
}
.table{display:table;}
.row{display:table-row;}
.column{display:table-cell;}
<div class="table">
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
    <div class="row">
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
        <div class="column">Info</div>
    </div>
</div>

Answer №2

If you're looking to quickly transform this content into a table format, you can achieve it with the following CSS:

div { display: table; }
div.row { display: table-row; }
div.column { display: table-cell; }

Once formatted as a table, feel free to customize the styling as needed or easily transfer it to Excel.

To convert the current markup into a table structure, simply replace the outer div tags with table, the <div class="row"> elements with tr, and columns with td. See the example below for guidance.

<table> <!-- was <div> -->
    <tr> <!-- was <div class="row"> -->
        <td> <!-- was <div class="column"> -->Info</td><!-- was </div> -->
        ...
    </tr> <!-- was </div> -->
</table> <!-- was </div> -->

Answer №3

Recently, I encountered a similar issue that required creative problem-solving. The content within these div elements is generated from query outputs. My suggestion would be to implement a foreach loop specifically designed to populate table cells with this data accurately. You could hide the table by default using display:none; to avoid displaying any duplicate entries. Another approach would be to assign custom data attributes like data-row="1", data-column="2", etc., to each div element and manipulate them using JavaScript before injecting them into a table structure. Once you have organized your data as desired, utilizing this plugin will make exporting the results to a CSV file a seamless process.

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

This as well as its parent node

I am looking to implement a function where an element is manipulated if a child of it is clicked (by adding a CSS class to it). My current approach is as follows: function mahlzeitRaus() { console.log("Out"); //this.className += " not"; this. ...

javascript

Tips for eliminating the backslash introduced by JQuery

Switching back from framework 4.5 to 4.0 caused several issues that needed fixing. One significant change I noticed was that jQuery started escaping double quotes. Is there a way to stop this behavior? I attempted datatest = datatest.replace("\\ ...

javascriptjqueryjsonvisual-studio-2012

Observable task queuing

Here's the scenario: In my application, the user can tap a button to trigger a task that takes 2 seconds to complete. I want to set up a queue to run these tasks one after another, in sequence. I am working with Ionic 3 and TypeScript. What would be ...

javascripttypescriptionic-frameworkionic3observable

By selecting the X icon to eliminate an option from the multi-select box in Angular-UI-Select, the app will redirect back to the home screen

My AngularJS application has multiple routes, and on one of the pages, I am utilizing Angular-UI-Select. When trying to remove an option in the multi-select box by clicking on the cross button, it mistakenly redirects to the app's home page instead o ...

javascriptangularjsangular-ui

Executing a jQuery Ajax: Approaches to implementing a short loop with a timed ping every 5 seconds

I am currently developing a polling system to alert users if there is already someone in a specific page or field, and want to perform a ping on that particular area to confirm if the person is still active. Here is the JavaScript code snippet I am using: ...

jqueryajaxtimeoutping

Retrieve only the names of keys from a JSON object presented in array form using Node.js

How can I retrieve JSON data key names and store them in an array using nodejs? I attempted the following code, but it returned an object instead of an array. I need the key names in an array format so that I can save them in a variable. const jsondata = ...

javascriptnode.jsjson

Leverage AngularJS templates across multiple locations

I currently have a table that showcases a list of products. This table is utilized on both the "All products" page and the "My products" page. Here is a snippet of the table code: <tr ng-repeat="product in products> <td>{{product.id}}</td ...

javascriptangularjs

Can a directive be designed to function as a singleton?

Our large single page app includes a directive that is utilized in various locations across the page, maintaining its consistent behavior and appearance each time. However, we are experiencing an issue with this directive due to the ng-repeat it contains, ...

javascriptangularjs

Adding Array Elements to List Elements

I am facing an issue while trying to display an array of items in a list. The problem is that when I click submit, it adds all the array items to each list item instead of adding one item each time. Here is the link to JSFIDDLE: https://jsfiddle.net/b7Lw ...

javascriptarrays

Material UI - Exploring the Tree View Component

Seeking advice on structuring server data for utilization with the TreeView component from Material UI: https://material-ui.com/api/tree-view/ I need to efficiently handle large datasets by fetching child nodes dynamically from the server upon user intera ...

javascriptreactjsmaterial-ui

Although the CSS3 Mobile Multilevel Menu is functioning, it is currently unable to display the second level of the

Hi there! I am currently working on a CSS3 vertical menu for a mobile webpage. While the first level of the menu is functioning correctly, the same cannot be said for the second level. It seems to always show up on mouseover, despite my numerous attempts t ...

htmlcssmobilemenu

Encountering an unexpected identifier error in Sails JS

As a newcomer to Sails JS, I am attempting to perform CRUD operations with it. However, I am encountering an unexpected error in my index function. I am struggling to identify where the mistake lies. // Usercontroller.js file module.exports = { creat ...

javascriptnode.jsmongodbnpmsails.js

Arranging two div elements side by side with spacing between them using CSS

Can anyone help me with aligning two divs side by side using CSS? I attempted a few methods on my own but seem to be stuck. Any suggestions would be greatly appreciated! CSS: .posts{ display: flex; flex-direction: row; } .posts .col-md-6{ pa ...

htmlcsslaravelbootstrap-4laravel-blade

Parsing nested json objects in an angular application

I'm trying to work with a complex nested JSON structure and I need to extract and display the data in HTML. The JSON data I have looks like this: { "Test Data": [ { "First Test": { "Design Name": "testname", "Output": "1" ...

htmljsonangulartypescript

jQuery 1.6.2 is compatible with the Android 2.1 emulator, but it does not function properly on the Samsung Galaxy

Has anyone experienced issues with using jquery-1.6.2.min.js on a Samsung Galaxy S with Android 2.1? If so, does anyone know how to modify it to make it work on this device? I recently created a mobile version of a javascript-based website that worked wel ...

javascriptjqueryandroid

Gradually disappear when scrolling "not fluid" or "jerky"

I recently developed a jQuery code to create a fade-out effect on an overlay while scrolling down. Everything seemed to be working smoothly until I noticed that on certain older PCs, the fade effect appears choppy and inconsistent. Strangely enough, on my ...

jqueryopacityfadeout

Unable to pass data to Laravel 5.1 controller using Ajax Load function

Jquery Ajax Request var pageNumber = $(this).attr("data-page"); $("#results").load('pagination',{"page":pageNumber}, function(){ }); Route Configuration File Route::get('pagination',"MyController@pagination" ); Server-Side Contr ...

phpjqueryajax

Adjust size of D3 Chart to fit parent container in a React application

Currently, I was going through a tutorial at: The tutorial provides a React Component setup like the following: class SimplePie extends React.Component { render() { return ( <div className="col-xs-4 chart" style={{background: this ...

javascriptd3.jsreactjs

JavaFX text label does not adjust its font according to the CSS file

In my FXML file, the structure is as follows: ... <BorderPane id="header"> <right> <Label styleClass="title" text="A Label" /> </right> </BorderPane> ... I also have a CSS file with the following content: #h ...

cssjavafx

Prevent Button Click in ASP.NET After Validating Regular Expression in Textbox

How can I ensure that the asp button is disabled only after the user submits the form with the correct regular expression? Below is the form code: <asp:TextBox ID="TextBox2" runat="server" placeholder="Email" class="form-control" type="email" Font-Siz ...

javascriptc#asp.netregex