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

There seems to be an issue with the function code error when calling it within the

Watching for changes to an element's visibility within the viewport and automatically scrolling it

Nested pages in the NextJS router do not properly highlight the active menu item

Troubleshooting AJAX issues in Firefox with window.location.assign function

What repercussions come from failing to implement an event handler for 'data' events in post requests?

All images must be arranged to fit seamlessly side by side regardless of the screen size

Having a problem with the xmlhttprequest, not confident if it is being called correctly

The second function in Vue.js was unable to initialize the data field within data() due to a missing call for assistance

What is the best way to retrieve the output of MongoDB's collection.aggregate() within a NodeJS callback function?

Why is it that when implementing React JS, the function setState is not updating the values on the chart when a Button is

Height of Hover Background Color in WordPress Menu

`Arranging Widget Boxes in a Vertical Layout`

Form validation using jQuery and AJAX

The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

Is there a way to customize Angular's number filter?

My AJAX requests do not include any custom headers being sent

Utilizing jQuery to target a select element's two specific children

Ensure that the <TabPanel> content occupies the entire width and height of its parent container

Adjusting the visible options in ngOptions causes a disruption in the selected value of the dropdown menu

store events in a MySQL database using a servlet callback and display them on a full calendar