Stopping prior entries in html tables

Question

Stopping prior entries in html tables

Is there a way to change the color of samples by clicking on each cell? Additionally, is it possible to cancel previous input by clicking a cancel button? If anyone has experience with this issue, please share your knowledge. Thank you.

$(function() {
  $("td").click(function() {
    $(this).addClass("red");
  });
});

.red{
  background-color: red;
}


td {
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

<button>cancel</button>

javascript jquery css

Answer 1

Answer №1

Here is the solution:

$(function() {
  let selected = [];
  $("td").click(function() {
    let selectedID = $(this).attr('id');
    selected.push(selectedID);
    $(this).addClass("highlight");
  });
  $("#btnCancel").on('click',() => {
    if(selected.length) {
      let lastSelected = selected.pop();
      $(`td#${lastSelected}`).removeClass("highlight");
    }
  })
});

.highlight{
  background-color: yellow;
}

td {
  padding: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

<button id="btnCancel">cancel selection</button>

Answer 2

Here is the solution:

$(function() {
  let selected = [];
  $("td").click(function() {
    let selectedID = $(this).attr('id');
    selected.push(selectedID);
    $(this).addClass("highlight");
  });
  $("#btnCancel").on('click',() => {
    if(selected.length) {
      let lastSelected = selected.pop();
      $(`td#${lastSelected}`).removeClass("highlight");
    }
  })
});

.highlight{
  background-color: yellow;
}

td {
  padding: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

<button id="btnCancel">cancel selection</button>

Answer 3

Answer №2


    let currentElement = null;
    $(function() {
      $("td").click(function() {
        $(this).addClass("highlighted");
        currentElement = $(this);
      });

      $('button').click(function() {
        if (currentElement !== null)
          currentElement.removeClass('highlighted');
      });
    });

Answer 4


    let currentElement = null;
    $(function() {
      $("td").click(function() {
        $(this).addClass("highlighted");
        currentElement = $(this);
      });

      $('button').click(function() {
        if (currentElement !== null)
          currentElement.removeClass('highlighted');
      });
    });

Answer 5

Answer №3

To keep track of the history, you can follow these steps:

const visitedPages = [];

function addToHistory(page) {
  const index = page.target.id;
  if (visitedPages.indexOf(index) < 0) visitedPages.push(index);
  highlight();
}

function undo() {
  visitedPages.pop();
  highlight();
}

function highlight() {
  const elements = document.getElementsByTagName("td");
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.remove("red");
  }
  visitedPages.forEach(index => {
    document.getElementById(index).className = "red";
  });
}

.red{
  background-color: red;
}


td {
  padding: 5px
}

<table>
  <td onclick="addToHistory(event)" id="1">1</td>
  <td onclick="addToHistory(event)" id="2">2</td>
  <td onclick="addToHistory(event)" id="3">3</td>
  <td onclick="addToHistory(event)" id="4">4</td>
  <td onclick="addToHistory(event)" id="5">5</td>
  <td onclick="addToHistory(event)" id="6">6</td>
  <td onclick="addToHistory(event)" id="7">7</td>
  <td onclick="addToHistory(event)" id="8">8</td>
  <td onclick="addToHistory(event)" id="9">9</td>
  <td onclick="addToHistory(event)" id="10">10</td>
</table>

<button onclick="undo()">Reset</button>

Answer 6

To keep track of the history, you can follow these steps:

const visitedPages = [];

function addToHistory(page) {
  const index = page.target.id;
  if (visitedPages.indexOf(index) < 0) visitedPages.push(index);
  highlight();
}

function undo() {
  visitedPages.pop();
  highlight();
}

function highlight() {
  const elements = document.getElementsByTagName("td");
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.remove("red");
  }
  visitedPages.forEach(index => {
    document.getElementById(index).className = "red";
  });
}

.red{
  background-color: red;
}


td {
  padding: 5px
}

<table>
  <td onclick="addToHistory(event)" id="1">1</td>
  <td onclick="addToHistory(event)" id="2">2</td>
  <td onclick="addToHistory(event)" id="3">3</td>
  <td onclick="addToHistory(event)" id="4">4</td>
  <td onclick="addToHistory(event)" id="5">5</td>
  <td onclick="addToHistory(event)" id="6">6</td>
  <td onclick="addToHistory(event)" id="7">7</td>
  <td onclick="addToHistory(event)" id="8">8</td>
  <td onclick="addToHistory(event)" id="9">9</td>
  <td onclick="addToHistory(event)" id="10">10</td>
</table>

<button onclick="undo()">Reset</button>

Stopping prior entries in html tables

Answer №1

Answer №2

Answer №3

Similar questions

Adjust the vertical positioning according to the percentage of the width

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

Creating a new version of the Javascript prompt() dialog by incorporating a modal interface

Leveraging jQuery to automatically fill in a time field while excluding other buttons

Establish the directive upon receiving the broadcast

Angular SPA Routing for .Net Core 2.0

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

When an icon is hovered over in Vue, a text box popup will be displayed

JavaScript Mortgage Calculator: Issue with Input Field Formatting when Adding Commas

Code has been loaded successfully for react-loadable Chunks, however it has not been

I need to display a VARCHAR variable retrieved from PHP in a visually appealing way with HTML/CSS. What is the best way to automatically format it to prevent it from appearing as one long, uninterrupted sentence?

React, Redux, Thunk - the trifecta of powerful

Submitting identical named elements in MVC4 can be achieved by utilizing the proper syntax and techniques

What is the best way to connect my Angular 2 project to the "$wakanda" service in order to access and retrieve data efficiently?

Having trouble with the linear gradient color length in HTML?

Creating a pros and cons form for users using jQuery involves dynamically checking and updating the input values to ensure that no

Display different images based on user selection in vue.js

At times, Chrome fails to load CSS files when requested

Despite being initialized previously in JavaScript, the attribute of the object is still showing as undefined

Utilizing Firebase authentication and next-auth in Next.js - Authentication currently returns null