Which programming language should I utilize to create a webpage that dynamically updates its content from a database?

Seeking advice on a complex task I'm facing. I'm currently managing a vast spreadsheet (266 rows with 70 columns, and growing) which serves as a database. I want to transfer this data from Excel to an intranet page. Currently, I'm using a mix of HTML and Javascript for functionality, but the task of ensuring data accuracy is proving to be quite challenging. Is there a way to export the Excel file to a specific format (like CSV or XML) and then develop a program on an HTML page to automatically display all this data in a table format? Is this even feasible?

Unfortunately, I don't have access to a server for assistance, so everything needs to be coded on the page itself.

Thank you to everyone for your valuable input!

javascriptasp.netsql

Answer №1

In considering your feedback, a well-organized database structure for managing this type of information would typically appear as follows:

table `employees`
- id
- name
- ...

table `training_sessions`
- id
- title
- description
- ...

table `employees_attending_training`
- employee_id
- training_id

By implementing this setup, you can efficiently create a coherent framework without constantly altering the database schema with additional columns for each new employee or training session. However, this approach necessitates the use of a database server and proficiency in server-side programming languages such as PHP, Python, Ruby, or C#. Alternatively, utilizing an Access database or application could serve as a suitable compromise if advanced server-side setups are not feasible. While exploring the idea of executing it entirely in JavaScript may seem intriguing, it is advisable to quickly discard this concept.

Answer №2

To work within your limitations, my suggestion would be to convert the Excel spreadsheet into a CSV file and place it in the same directory as your HTML file. Then, utilize AJAX to retrieve the data from the CSV file and dynamically create an HTML table based on its contents.

If you need guidance on how to fetch a URL's contents using AJAX (specifically with the jQuery library), check out this resource: http://api.jquery.com/jQuery.get/

Once you've successfully fetched the content from the URL and stored the CSV data as a large string in a JavaScript variable, the next step is to figure out how to parse it. Good luck with that part! :-)

Once you're able to parse the CSV string to identify rows and columns, refer to this guide on how to dynamically generate an HTML table using the jQuery library: Building an HTML table on the fly using jQuery

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

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

My website incorporates the jQuery.validationEngine plugin to ensure the accuracy of user input. The tooltips that accompany this validation feature are particularly appealing; they gracefully fade in and vanish when users interact with them. To visualize ...

javascriptjqueryjquery-plugins

Troubleshooting: Issue with Chrome's CSV Export Functionality in JavaScript/AngularJS

Currently, I am troubleshooting an issue with exporting a CSV file from a data table on a web application. The export functionality works fine on all browsers except for Chrome when the export button is clicked. I have been trying to solve this problem for ...

javascriptangularjsgoogle-chromeecmascript-6export-to-csv

What is the best way to add a checkbox tag in Rails using JavaScript?

I am attempting to use javascript to append the values from option fields to checkboxes in Rails. Here is a snippet of my javascript code: $("#regions option").each(function(){ $("#region-checkboxes").append('<li><%= check_box_tag "region ...

javascriptjqueryhtmlruby-on-railsruby

What is the best way to activate only one dropdown menu from a collection of others produced within a .map

I feel a bit lost with this issue, but I'm hoping for some guidance! Within my MenuWithDropdown Component, I've set up several dropdowns. Each dropdown is supposed to be activated with the handleClick() function. Normally, I would use this.state ...

javascriptreactjsuser-interfacestateful

PHP code that prevents undefined index when uploading photos. Ensure photos are successfully inserted into an SQL

Currently, I am dealing with a registration form that includes an option for users to upload a photo for their profile picture. Everything works smoothly when trying to submit the form except for the errors related to the picture index. I strongly believe ...

phphtmlsqlimage-uploading

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

What is the preferred approach: displaying a message using a service or a directive?

I'm feeling a bit unsure. I understand that anything interacting with the DOM should be created as a directive. However, I find it more convenient to simply call my notification service to display error or success messages. This service internally cr ...

javascriptangularjs

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

javascriptphphtml

The React Stripe API is functioning perfectly on local servers but encountering issues in the live environment

Just when I thought I was almost finished, reality hits me hard! My deadline is right around the corner! I finally got everything working on my local machine with a stripe payment form. However, when I pushed it live, I received an error message from my A ...

javascriptreactjsstripe-payments

Some PDF files appear as blank when shown using a Base64 encoded string

I am attempting to display a PDF file on a web page using its base64 encoding. Below is the ReactJS code I am using: <object style={{ width: '100%', height:'842pt' }} type="application/pdf" data={`data:application/pdf;base ...

javascripthtmlreactjsgoogle-chromepdf

I aim to utilize JavaScript to capture the constantly changing font color that is randomly generated

Is there a way to extract the font color from a table element? #FF0000 For example, it could be #568000 etc.. Here's my table <table class="mytable"> <th class=vertical bgcolor=#C0C0C0 align=center> <font color=#FF0000 size= ...

javascriptjqueryhtmlcssfonts

Updating the content within the main body of the page rather than the sidebar in react-router v5

I have a question regarding the functioning of my sidebar and content. So, when I click on any item in the sidebar, the content changes accordingly. But what if I want to change the route directly from the content itself? That's where I'm facing ...

javascriptreactjsreact-routerfrontendsingle-page-application

How can I transfer a MongoDB collection to an EJS file in the form of a sorted list?

I have successfully displayed the collection as a json object in its own route, but now I want to show the collection in a list under my index.ejs file (I'm still new to ejs and MongoDB). Below is the code that allows me to view the json object at lo ...

javascriptnode.jsjsonmongodbejs

To utilize the span and input text increment functionality, simply use the required input type number and hold either the up or down arrow

Is it possible to increment the value of an input type number by 1 when holding down on a mobile device? <input type="text" id="number" value="1"> <span id="upSpan"> Up </span> $('#upSpan').on('touchstart', function ...

javascriptjqueryjquery-mobiletouch-event

Searching for related values in a nested array of objects using JavaScript: A guide

My goal for this project is to thoroughly examine the path along with all nested elements within the Items and assign them to the details variable. However, due to the limitations of the function inside the useEffect, I am unable to check nested items eff ...

javascriptreactjsarrays

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

javascriptjqueryhtmlselect

The integration of Tinymce and Vuetify dialog is causing issues where users are unable to input text in the source code editor or add code samples

Having an issue with the Vuetify dialog and TinyMCE editor. Upon opening the dialog with the editor inside, certain functionalities like Edit source code or Insert code sample are not working as intended. Specifically, when attempting to use one of these p ...

javascriptvue.jstinymcevuetify.js

Tips for using MatTableDataSource in a custom Thingsboard widget

After creating multiple custom Thingsboard widgets, I've discovered that I can access a significant portion of @angular/material within my widget code. While I have successfully implemented mat-table, I now want to incorporate pagination, filtering, a ...

javascriptangularangular-materialthingsboardangular-material-table

Having trouble getting NPM environment variables to function properly on a Windows system?

I have a confusion in my package.json file where I am attempting to compile less code using versioning. Here is an example of what I am trying to achieve: "scripts" { ... "build:css": "lessc --source-map css/index.less build/$npm_package_name.$npm_package ...

javascriptjsonnode.jswindowsnpm

react-swiper does not trigger a re-render

function WorkSpace() { const dispatch = useDispatch(); const edit = useSelector((state)=>(state.workSpace.edit)); const currentMode = useSelector((state)=>(state.workSpace.currentMode)); useEffect(()=>{ const swiper = docu ...

javascriptreactjs