Tips for choosing a specific cell in a table

I currently have a total of 14 cells that have been generated.

Is there a way for me to individually select and manipulate a specific cell out of the 14? I am looking to make only one cell unique, while leaving the rest to be displayed as they are in the code, without any alterations.

var isCol = 0;
var board = [];
for (r = 0; r < 7; r++) {
  var line = [];
  for (c = 0; c < 7; c++) {
    line.push(r);
  }
  board.push(line);
}


function prs(c, r) {
  showTable(c, r);
  isCol = (isCol + 1) % 2;
}

function toColor(col, row, chosen_col, chosen_row) {
  var ret = false;
  switch (isCol) {
    case 0:
      if (row == chosen_row) {
        ret = true;
      }
      break;
    case 1:
      if (col == chosen_col) {
        ret = true;
      }
      break;
  }

  return ret;
}

function showTable(chosen_col, chosen_row) {
  var str = "";
  str += "<table border=1>";
  for (row = 0; row < 7; row++) {
    str += "<tr>";
    for (col = 0; col < 7; col++) {
      str += "<td onclick='prs(" + col + "," + row + ")'";
      if (toColor(col, row, chosen_col, chosen_row)) {
        str += " class='grn' ";
      }
      str += ">";
      str += RandomGenerator(50, 500);
      str += "</td>";
    }
    str += "</tr>";
  }
  str += "</table>";

  document.getElementById("ff").innerHTML = str;
}



function RandomGenerator(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}



showTable(-1);
td {
  border: 2px solid black;
  width: 10px;
  height: 10px;
}

td:hover {
  background-color: lightgreen;
}

.grn {
  background-color: green;
  color: white;
}
<div id='ff'></div>

Answer №1

To differentiate each row, you can assign a unique ID to it.

For example:

<td id = "specialRow"> ... </td>

In your JavaScript code, you can then access this ID as follows:

var specialRow = document.getElementById('specialRow');

You can now use the 'specialRow' variable to perform necessary actions on that specific row.

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

Can you guide me on how to activate the pickadate.js calendar above the input field?

Encountering an issue with the Pickadate calendar. There seems to be a problem at the bottom of the page, please refer to the attachment for more details. My challenge is that I need to display the Pickadate calendar above the input field when the field is ...

Sending data from a partial view to a controller

Imagine I have two models: DailyTasks and Task. The initial view is strongly typed with the DailyTasks model, displaying a list of existing tasks for the day. Users can add more tasks to the list/table by clicking the add button. Upon clicking the add butt ...

Dealing with images on my live React application

For managing static images in my react app, I have integrated cloudinary as a CDN service. Can anyone suggest a seamless way to switch between using local image folders during development and switching to the CDN URL for production efficiently? ...

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

Animating the height of a div using jQuery after loading dynamic content

When I load a page using AJAX, the content is represented as a string. I am then trying to animate the height of a container if the content is larger than the current height of the container. However, for some reason, the variable _height always ends up ...

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) { getparentById(e.Id) .then(function(getresponse) { var parentLink = '<a href="/#/parent/onboard/' + e.Id + '" target="_blank">' + e.Number + "-&qu ...

Halt the program's process until the ajax request has finished

Struggling with what seems like a common issue of the "Asynchronous Problem" and finding it difficult to find a solution. Currently, I am working on a custom bootstrap form wizard which functions as tabs/slideshow. Each step in the wizard is represented b ...

Response Headers in Google Cloud Functions

When executing a GCF triggered by an Http Request, I encounter the issue of receiving unnecessary headers along with my custom message. Here is a list of headers that are included: HTTP/1.1 200 OK Server: nginx Content-Type: application/json; charset=utf- ...

Creating HTML elements dynamically with attributes based on the `as` prop in React using TypeScript

Is there a way to dynamically create HTML elements such as b, a, h4, h3, or any element based on the as={""} prop in my function without using if guards? I have seen a similar question that involves styled components, but I am wondering if it can be done ...

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

What is the best method for transferring data from Firestore into a Vue CLI project?

I am currently facing a challenge in importing data from a Firestore Database into my Vue CLI project. Despite following multiple tutorials, I have not been successful in making it work correctly. It appears that I am encountering difficulties in retrievin ...

What is preferable: defining JSON schema properties or utilizing oneOf conditions within an array of objects

I am looking to represent a variety of objects in a schema through an array called contents. This array can include any number of elements, but they must fall into one of two categories: one type represents text while the other type represents images. Up ...

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added

Currently, I am working on a project using Angular and firebase. My goal is to develop a function that can take two arguments - a string and an object, then return an Observable containing filtered data based on the key-value pairs in the object for a spe ...

Place the image either above or below the text in a relative position

I have a peculiar dilemma that has been on my mind lately. As I work on designing my website, I am nearing completion of the responsive/mobile view. Currently, everything looks fine, but only because I use display: none; to hide images when the viewport is ...

Contrasting assign and modify operations on arrays

After spending 2 days searching for a bug in my angular2 project's service.ts file, I finally found it and fixed it. However, I'm still trying to understand why the working code behaves differently from the bugged one, as they appear identical to ...

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

Searching for a specific element in Vue.js using its unique identifier (ID) can be

I have a new project using Vue. It includes a div that loops through title and data. Inside the div, there is a search filter and content that renders in p tags. The p tags also go through a loop. Take a look at the code below: <div> <div v- ...

In some cases, the Ajax reading or fetching variable may have difficulty retrieving the precise variable when working with CodeIgn

I've encountered a puzzling issue with my ajax code, or perhaps it's related to ajax itself. My code retrieves a value from a label and combines it with fresh data from the database. Strangely enough, every time I refresh the page, the output var ...

Utilizing Nuxt3's auto-import feature alongside Eslint

I'm having trouble finding an eslint setup that is compatible with Nuxt3's auto-import feature to prevent no-undef errors. I have tried various packages like @antfu/eslint-config, plugin:nuxt/recommended, @nuxt/eslint-config, @nuxtjs/eslint-confi ...

ViewContainerRef fails to render component on the DOM

@Component({ selector: 'my-cmp', template: ` <div #target></div> ` }) export class MyCmp { @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef; render() { let component = createComponent(met ...