What is the best way to assign a unique ID to every element in this situation?

Question

What is the best way to assign a unique ID to every element in this situation?

Here is the given code:

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

document.getElementById("wordTable").innerHTML = arr2tbl(2);

function arr2tbl(ncols) {
  return words.reduce((a, c, i) => {
    if (i % ncols == 0) a.push([]);
    a.at(-1).push(c);
    return a;
  }, []).map(r => "<tr>" + r.map(c => `<td>${c}</td>`).join("") + "</tr>").join("\n");
}

<table id="wordTable"></table>

The above code generates this table:

<table>
<tr>
<td>ac</td> <td>bd</td>
</tr>
<tr>
<td>bf</td> <td>uy</td>
</tr>
<tr>
<td>ca</td><td></td>
</tr>
</table>

I need to assign an id for each word so I can style them dynamically. The desired formatting should look like this:

<table>
<tr>
<td id="1">ac</td>  <td id="2">bd</td>
</tr>
<tr>
<td id="3">bf</td>  <td id="4">uy</td>
</tr>
<tr>
<td id="5">ca</td><td></td>
</tr>
</table>

To enable flexible styling with a function like this:

function formatWord(wordID){
  document.getElementById(wordID).style.color = "red";
}

Users can randomly call formatWord(2); formatWord(5);...

If assigning ids to "td" elements is not possible, it doesn't matter as long as we can apply dynamic styles to the words in the table.

How can I add an id to each element in this scenario?

javascript html css

Answer 1

Answer №1

Here's a simpler way to generate a table using JavaScript instead of innerHTML

arr2tbl( 
  ['ac', 'bd', 'bf', 'uy', 'ca'], 
  document.querySelector(`#wordTable`), 
  2 );

document.querySelector(`pre`).textContent = 
  document.querySelector(`#wordTable`).outerHTML;

function arr2tbl(words, forTable, ncols) {
  let currentRow = document.createElement(`tr`);
  forTable.append(currentRow);
  
  words.forEach( (word, i) => {
     if (i > 0 && i % ncols === 0) {
        forTable.append(currentRow.cloneNode());
     }
     
     forTable.querySelector(`tr:last-child`).append(
      Object.assign( document.createElement(`td`), 
      { id: i + 1, textContent: word } ) );
  });
}

<table id="wordTable"></table>
<h3>The table html</h3>
<pre></pre>

Answer 2

Here's a simpler way to generate a table using JavaScript instead of innerHTML

arr2tbl( 
  ['ac', 'bd', 'bf', 'uy', 'ca'], 
  document.querySelector(`#wordTable`), 
  2 );

document.querySelector(`pre`).textContent = 
  document.querySelector(`#wordTable`).outerHTML;

function arr2tbl(words, forTable, ncols) {
  let currentRow = document.createElement(`tr`);
  forTable.append(currentRow);
  
  words.forEach( (word, i) => {
     if (i > 0 && i % ncols === 0) {
        forTable.append(currentRow.cloneNode());
     }
     
     forTable.querySelector(`tr:last-child`).append(
      Object.assign( document.createElement(`td`), 
      { id: i + 1, textContent: word } ) );
  });
}

<table id="wordTable"></table>
<h3>The table html</h3>
<pre></pre>

Answer 3

Answer №2

When we use the reduce function, it is possible to pass the index value into the array.

var words=['ac', 'bd', 'bf','uy','ca'];

let result = arrToTable(2)
console.log(result)
document.getElementById("wordTable").innerHTML=result;

function arrToTable(ncols){
 return words.reduce((a,c,i)=>{
 if(i%ncols==0)a.push([]);
   a.at(-1).push([c,i+1]);
   return a;
  },[]).map(r=>"<tr>"+r.map(c=>`<td id="${c[1]}">${c[0]}</td>`).join("")+"</tr>").join("\n");
}

<table id="wordTable"></table>

Answer 4

When we use the reduce function, it is possible to pass the index value into the array.

var words=['ac', 'bd', 'bf','uy','ca'];

let result = arrToTable(2)
console.log(result)
document.getElementById("wordTable").innerHTML=result;

function arrToTable(ncols){
 return words.reduce((a,c,i)=>{
 if(i%ncols==0)a.push([]);
   a.at(-1).push([c,i+1]);
   return a;
  },[]).map(r=>"<tr>"+r.map(c=>`<td id="${c[1]}">${c[0]}</td>`).join("")+"</tr>").join("\n");
}

<table id="wordTable"></table>

Answer 5

Answer №3

If you want to share the position of a word, you can do it by passing the index like this:

let words = ['one', 'two', 'three', 'four', 'five'];

document.getElementById('wordTable').innerHTML = createTable(2);

function createTable(ncols){
 return words.reduce((a,c,i)=>{
 if(i%ncols==0)a.push([]);
   a.at(-1).push([c, (i + 1)]);
   return a;
  },[]).map(r=>"<tr>"+r.map(c=>`<td id="${c[1]}">${c[0]}</td>`).join("")+"</tr>").join("\n");
}

<table id="wordTable" border="1"></table>

Answer 6

If you want to share the position of a word, you can do it by passing the index like this:

let words = ['one', 'two', 'three', 'four', 'five'];

document.getElementById('wordTable').innerHTML = createTable(2);

function createTable(ncols){
 return words.reduce((a,c,i)=>{
 if(i%ncols==0)a.push([]);
   a.at(-1).push([c, (i + 1)]);
   return a;
  },[]).map(r=>"<tr>"+r.map(c=>`<td id="${c[1]}">${c[0]}</td>`).join("")+"</tr>").join("\n");
}

<table id="wordTable" border="1"></table>

Answer 7

Answer №4

If you want to simplify the process, consider creating a variable called index and incrementing it during your chosen iteration.

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

        document.getElementById("wordTable").innerHTML = createTable(2);

        function createTable(columns) {
            var index = 1;
            return words.reduce((acc, current, i) => {
                if (i % columns === 0) acc.push([]);
                acc.at(-1).push(current);
                return acc;
            }, []).map(row => "<tr>" + row.map(col => `<td id=${index++}>${col}</td>`).join("") + "</tr>").join("\n");
        }

<table id="wordTable"></table>

Best of luck with your code!

Answer 8

If you want to simplify the process, consider creating a variable called index and incrementing it during your chosen iteration.

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

        document.getElementById("wordTable").innerHTML = createTable(2);

        function createTable(columns) {
            var index = 1;
            return words.reduce((acc, current, i) => {
                if (i % columns === 0) acc.push([]);
                acc.at(-1).push(current);
                return acc;
            }, []).map(row => "<tr>" + row.map(col => `<td id=${index++}>${col}</td>`).join("") + "</tr>").join("\n");
        }

<table id="wordTable"></table>

Best of luck with your code!

Answer 9

Answer №5

I find this much easier to digest.

Personally, I wouldn't opt for numeric IDs but rather something along the lines of

const idx = `row-${rowStartIndex}-cell${cellIndex}`;

const words = ['ac', 'bd', 'bf', 'uy', 'ca'];

const arr2tbl = (ncols) => {
  // Determine the number of rows required
  const nrows = Math.ceil(words.length / ncols);

  // Generate an array of rows using Array.from function argument
  return Array.from({ length: nrows }, (_, rowIndex) => {
    // Calculate start index of current row in original array
    const rowStartIndex = rowIndex * ncols;

    // For each row, create an array of cell strings
    const cells = words.slice(rowStartIndex, rowStartIndex + ncols)
      .map((word, cellIndex) => {
        // Calculate word's index in original array for ID
        const idx = (rowStartIndex + cellIndex)+1; // one based
        // const idx = `row-${rowStartIndex}-cell${cellIndex}`;
        return `<td id="${idx}">${word}</td>`;
      })
      .join(''); // Combine cell strings into a row

    return `<tr>${cells}</tr>`; // Enclose row cells in <tr> tags
  }).join('\n');
};
document.getElementById("wordTable").innerHTML = arr2tbl(2);

<table>
  <tbody id="wordTable"></tbody>
</table>

Answer 10

I find this much easier to digest.

Personally, I wouldn't opt for numeric IDs but rather something along the lines of

const idx = `row-${rowStartIndex}-cell${cellIndex}`;

const words = ['ac', 'bd', 'bf', 'uy', 'ca'];

const arr2tbl = (ncols) => {
  // Determine the number of rows required
  const nrows = Math.ceil(words.length / ncols);

  // Generate an array of rows using Array.from function argument
  return Array.from({ length: nrows }, (_, rowIndex) => {
    // Calculate start index of current row in original array
    const rowStartIndex = rowIndex * ncols;

    // For each row, create an array of cell strings
    const cells = words.slice(rowStartIndex, rowStartIndex + ncols)
      .map((word, cellIndex) => {
        // Calculate word's index in original array for ID
        const idx = (rowStartIndex + cellIndex)+1; // one based
        // const idx = `row-${rowStartIndex}-cell${cellIndex}`;
        return `<td id="${idx}">${word}</td>`;
      })
      .join(''); // Combine cell strings into a row

    return `<tr>${cells}</tr>`; // Enclose row cells in <tr> tags
  }).join('\n');
};
document.getElementById("wordTable").innerHTML = arr2tbl(2);

<table>
  <tbody id="wordTable"></tbody>
</table>

Answer 11

Answer №6

An easy way to improve your code is by first mapping the cells before generating the rows as shown in the example below:

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

document.getElementById("wordTable").innerHTML = arr2tbl(2);

function arr2tbl(ncols) {
  return words
    .map((word, index) => `<td id="${index + 1}">${word}</td>`)
    .reduce((a, c, i) => {
      if (i % ncols == 0) a.push([]);
      a.at(-1).push(c);
      return a;
    }, [])
    .map((row) => "<tr>" + row.join("") + "</tr>").join("\n");
}

<table id="wordTable"></table>

Answer 12

An easy way to improve your code is by first mapping the cells before generating the rows as shown in the example below:

var words = ['ac', 'bd', 'bf', 'uy', 'ca'];

document.getElementById("wordTable").innerHTML = arr2tbl(2);

function arr2tbl(ncols) {
  return words
    .map((word, index) => `<td id="${index + 1}">${word}</td>`)
    .reduce((a, c, i) => {
      if (i % ncols == 0) a.push([]);
      a.at(-1).push(c);
      return a;
    }, [])
    .map((row) => "<tr>" + row.join("") + "</tr>").join("\n");
}

<table id="wordTable"></table>

What is the best way to assign a unique ID to every element in this situation?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Issue encountered: Failure to locate module 'socket.io' while attempting to execute a basic server JavaScript file

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

Is it feasible to verify for vacant dates with a single click?

Can certain parts of an MP4 file be accessed remotely through a network connection?

Tips for identifying when a change has been made to a SCSS file or any of its partial files

navigate to a new page in vue with node.js

Unable to save data retrieved using jQuery JSONP

What could be causing npm to fail to launch?

Halt the adhesion of the Bootstrap column when it hits the div section

Tips on relocating the input position to the top

What is the most efficient method for implementing uniform rounded corners in HTML/CSS across different web browsers?

Using jQuery to insert a div class with PHP referenced

Illuminate the rows in a table generated from a parsed text file using PHP

Javascript timer that counts down using cookies for storage

Utilize map() and concat() in JavaScript for more streamlined code - a tidier approach

Using jQuery to retrieve the text content of child elements

How to handle a Vue element click event through programming

Increase visibility, decrease visibility by utilizing ng-hide/ng-show and functions

"Transmit the document by utilizing the file ID in the form of

What is the purpose of having several script tags following the creation of NextJS?