CODEWITHSUNDEEP
javascripthtml
Ajithraj
Ajithraj

Reputation: 528

How to use generated id further in my code (javascript)

i'm using javascript. In my code (given below) table is generated by holding input field in each cell, and ID is generated for each input field.

Actually I need to access the generated id_name to change the style (color,font-size,etc,...) for each input value. 

function myFunction() {

  //getting no. of cols and rows
  var cols = document.getElementById("id1").value;
  var rows = document.getElementById("id2").value;
  
  //table creation 
  var table = document.createElement('table');
  var i,j,k=0;

  for(i=0;i<cols;i++) {
    var tr = document.createElement('tr');

    for(j=0;j<rows;j++) {
      var td = document.createElement('td');

      //generating input field for each cell 
      var input = document.createElement("input");
       input.type = "text";
       input.value = "";
       input.id=makeid(k+1);
       td.appendChild(input);

      var text = document.createTextNode(td.innerText);
      td.appendChild(text);
      tr.appendChild(td);
      table.appendChild(tr);
    
      document.body.appendChild(table);
      k++;
    }
  }  
}

//generating id_name (eg: A AA AAA AAAA ......)
function makeid(len) {
   var result           = '';
   var characters       =         'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.len;
   for ( var i = 0; i < len; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}

function myFun() {

    //access id_name for changing style for each input value

}
<input type="number" id="id1" value="" placeholder="col"  autocomplete="off">
<input type="number"  id="id2" onKeyup="myFunction()" value="" placeholder="row" autocomplete="off">

<button id='id3' onclick="myFun()" style='float:right;'>Change</button>

Eg: if you give values 2 and 2 for cols and rows, then 4 input field will be generated then type anything in that field and i want to apply style for that when clicking on the button 'change'

Upvotes: 0

Views: 91

Answers (2)

jsduniya
jsduniya

Reputation: 2474

If you only wants to get input fields.

css 
  .test {
   color:green,
   font:12px;
 }


var dynamicInputs = document.querySelectorAll('*[id^="A"]');

function classChanges(input){
    input.setAttribute('class','test')
}

dynamicInputs.forEach(classChanges);

Upvotes: 0

Rishab
Rishab

Reputation: 1522

Here is a solution to iterate through the table rows and apply the style to the input field.

To change the style of an HTML element, use this syntax:

 document.getElementById(id).style.property = new style 


function myFun() {
  var table = document.getElementById('my_table');
  var tds = table.getElementsByTagName("td");
  for(var i = 0; i < tds.length; i++) {
     // add style to input field
     tds[i].firstElementChild.style.color="red";
  }
}


function myFunction() {

  //getting no. of cols and rows
  var cols = document.getElementById("id1").value;
  var rows = document.getElementById("id2").value;
  
  //table creation 
  var table = document.createElement('table');
  var i,j,k=0;
  table.setAttribute("id", "my_table");

  for(i=0;i<cols;i++) {
    var tr = document.createElement('tr');
    for(j=0;j<rows;j++) {
      var td = document.createElement('td');

      //generating input field for each cell 
      var input = document.createElement("input");
       input.type = "text";
       input.value = "";
       input.id=makeid(k+1);
       td.appendChild(input);

      var text = document.createTextNode(td.innerText);
      td.appendChild(text);
      tr.appendChild(td);
      table.appendChild(tr);
    
      document.body.appendChild(table);
      k++;
    }
  }  
}

//generating id_name (eg: A AA AAA AAAA ......)
function makeid(len) {
   var result           = '';
   var characters       =         'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.len;
   for ( var i = 0; i < len; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}
<input type="number" id="id1" value="" placeholder="col"  autocomplete="off">
<input type="number"  id="id2" onKeyup="myFunction()" value="" placeholder="row" autocomplete="off">

<button id='id3' onclick="myFun()" style='float:right;'>Change</button>

Upvotes: 1

Related Questions