Basic website layout

As someone who is new to web programming, I kindly ask for your patience :)

I have a goal to design a page similar to the one linked below https://i.sstatic.net/HbJF3.png

There are two key functionalities I am aiming for:

1) Clicking the button on the right should change all cells to green

2) The data in the cells will be exported from an excel table, so updating the excel sheet will automatically refresh the page.

*3) - If feasible - I would like to save the current state of each row (highlighted or not) so that when the page is closed and reopened, the previously highlighted cells can be retained.

Any form of assistance would be greatly appreciated.

Thank you in advance :)

javascripthtmlcssexcel

Answer №1

i believe this snippet of code will be beneficial for you 

$(function(){
    $('.table').on('click', 'tr', function(e){
            var $tr = $(this);
            var $table = $tr.closest('.table');
            var our_index = $($tr,$table).index();
            if (e.shiftKey) {
                var last_index = $table.data('last-index');
                if (last_index) {
                    if (last_index < our_index) {
                        while(last_index < our_index) {
                            $('tbody tr:eq('+(++last_index)+')', $table).click();
                        }   
                        $('tbody tr:eq('+(last_index)+')', $table).click();
                    } else {  
                        while(last_index > our_index) {
                            $('tbody tr:eq('+(--last_index)+')', $table).click();
                        }
                        $('tbody tr:eq('+(last_index)+')', $table).click();
                    } 
                }
                $table.data('last-index',our_index);
            } else {
                $table.data('last-index',our_index);
            }
            
            if ($tr.hasClass('success')) {
                $tr.removeClass('success');
            } else {
                $tr.addClass('success');
            }
    });
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>



<!------ Include the above in your HEAD tag ---------->

<div class="container">
<div class="row">
<h2>Table Row Selector with Shift Special Key</h2>


<table class="table table-bordered table-condensed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>0</td><td>Example</td></tr>
        <tr><td>1</td><td>Example</td></tr>
        <tr><td>2</td><td>Example</td></tr>
        <tr><td>3</td><td>Example</td></tr>
        <tr><td>4</td><td>Example</td></tr>
        <tr><td>5</td><td>Example</td></tr>
        <tr><td>6</td><td>Example</td></tr>
        <tr><td>7</td><td>Example</td></tr>
        <tr><td>8</td><td>Example</td></tr>
        <tr><td>9</td><td>Example</td></tr>
        <tr><td>10</td><td>Example</td></tr>
        <tr><td>11</td><td>Example</td></tr>
        <tr><td>12</td><td>Example</td></tr>
        <tr><td>13</td><td>Example</td></tr>
        <tr><td>14</td><td>Example</td></tr>
        <tr><td>15</td><td>Example</td></tr>
        <tr><td>16</td><td>Example</td></tr>
        <tr><td>17</td><td>Example</td></tr>
        <tr><td>18</td><td>Example</td></tr>
        <tr><td>19</td><td>Example</td></tr>
    </tbody>
</table>


</div>
</div>

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

Looking for a jquery plugin that allows you to easily toggle between showing and hiding elements

I'm in need of some guidance on finding a slide window plugin in jQuery. My goal is to create a feature similar to Yahoo Mail, where users can hide the advertisement pane shown on the right side by clicking a button. I would greatly appreciate any as ...

javascriptjquery

Storing data in a text or HTML file using server-side JavaScript

Currently, I am working on a JavaScript form that involves saving user-entered variables to either a .txt file or a new webpage with the variables pre-filled in the inputs. I know that JavaScript cannot directly manipulate the user's machine, but I am ...

javascripthtmlserver-side

Tips on building Pivot tables using OpenXML SDK alongside creating charts with filter options

We are currently involved in a migration project that involves the generation of Excel (.xlsx) files using Microsoft.Office.Interop.Excel. In our new application, we have switched to using Open XML SDK with C# to create Excel files. These files contain Piv ...

c#.netexcelopenxmlopenxml-sdk

Set the rowspan to 2 when the v-for index does not equal 2

This is the table I am working with: <table class="table table-condensed table-sm table-striped table-bordered" id="list"> <thead> <tr> <th v-for="(column, index) in columns" :key=& ...

javascriptvue.js

stop automatic resizing of windows

My CSS is written using percentages. I need to maintain the percentages intact. Is there a way to stop the layout from changing when the browser window is resized? I want the percentages to remain unaffected, even when the browser window is being resized ...

javascriptjqueryhtmlcss

Change the css code to override the color of the background material

Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change. After inspecting the element on the web browser, I found the CSS code that controls th ...

cssmaterial-ui

Issue with special characters while exporting PHP data to Excel

I found some code on a website that is supposed to convert data from MySQL to Excel. Here is the link to the code I'm trying to use: When I try to save the Excel file, it works fine if there are no special characters. However, when it converts the ...

phpmysqlexcel

What is the optimal location for making API requests in a React/Redux/Reach Router application?

I'm struggling to figure out the optimal location for making API calls in my app. My main component structure looks like this: ReactDOM.render( <React.StrictMode> <Provider store={store}> <Router /> ...

javascriptreactjsfetch

Updating a marker in real-time using API response

I'm trying to create a simple web application that allows users to enter a city name in an input box, which then triggers the updateMap function to geolocate and map the city with a marker. After mapping the city, another function called updateTemp is ...

javascriptjqueryajaxgoogle-maps

Creating a JSON object from two arrays is a simple process

Consider the following two arrays: let values = ["52", "71", "3", "45", "20", "12", "634", "21"]; let names = ["apple", "orange", "strawberry", &q ...

javascriptarraysjsontypescript

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

javascripttypescriptprismaself-referenceself-referencing-table

Node.js - Hitting maximum call stack size limit despite using process.nextTick()

I am currently developing a module for creating "chainable" validation in Express.js: const validatePost = (req, res, next) => { validator.validate(req.body) .expect('name.first') .present('This parameter is required') ...

javascriptnode.jsvalidationecmascript-6

Is there a way for me to retrieve information from a different website using a URL, similar to how Digg's submit button works

Currently, I am in the process of developing a website with the cakePHP framework. As a beginner in PHP and web programming, my goal is to implement a feature similar to Digg's submit button. This functionality would involve inputting a URL, which the ...

phpjavascriptajaxcakephp

Looking for a way to extract information from two nested objects within an array by utilizing lodash, and then transferring it as a property to a react component

My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...

javascriptarraysreactjsreact-props

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

htmlcss

Uncovering the Secrets of Accessing Tag Attributes in ReactJS

I have developed a small app using reactjs. I have set an attribute on the button tag and passed a value to it. Now, when I click on the button, I want to retrieve the attribute value. How can I achieve this with react js? Here is a sample code snippet: ...

javascriptjqueryhtmlreactjs

Enhance React scrollbar functionality without relying on third-party dependencies

Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...

javascriptcssreactjsscrollbar

Tips for choosing a table row that is not the first or last cell

#MyTable tr+tr:hover { background: #dfdfdf; } <table id="myTable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td>2</td> &l ...

csscss-selectors

What is the best way to center my image both vertically and horizontally?

Utilizing react.js to develop a template website has been my current project. The issue arose when I began constructing the first component of the site. The dilemma: The picture was not centered on the page, neither vertically nor horizontally. Despite ...

cssreactjs

jQuery functionality restricted to desktop devices

I am attempting to disable a jQuery function specifically for mobile devices. I found some instructions that seem helpful on this page. Unfortunately, following the instructions did not work for me. Here is the code snippet I have: var isMobile = /Androi ...

javascriptjquery