skip to Main Content

Given this 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 code prints out 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>

But I want to assign id for each word so that I can format them dynamicaly

something 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>

So that later on I can have a fuction like this

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

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

If we can not do this with "td", it doesn’t matter. As long as I can format the words in the table dynamically.

How to add id to each element in this case?

3

Answers


  1. You could pass along the index of the word like so:

    let words = ['one', 'two', 'three', 'four', 'five'];
    
    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, i]);
       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>
    Login or Signup to reply.
  2. We can pass the index value into the array when reducing

    var words=['ac', 'bd', 'bf','uy','ca'];
    
    let result = arr2tbl(2)
    console.log(result)
    document.getElementById("wordTable").innerHTML=result;
    
    function arr2tbl(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>
    Login or Signup to reply.
  3. You can do it as simple as possible with adding a variable called index and then ++ it on your preferred iteration.

    var words = ['ac', 'bd', 'bf', 'uy', 'ca'];
    
            document.getElementById("wordTable").innerHTML = arr2tbl(2);
    
            function arr2tbl(ncols) {
                var index = 1;
                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 id=${index++}>${c}</td>`).join("") + "</tr>").join("n");
            }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div>
            <table id="wordTable"></table>
        </div>
    </body>
    
    </html>

    Good Luck!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search