CODEWITHSUNDEEP
javascripthtml
Jordan Davis
Jordan Davis

Reputation: 875

Duplicate table rows based on a count and assign unique ids

So I need to create duplicate table rows based on an count that I will pass the webpage. So for example if the count is 3, I need 3 rows below the table headers. Javascript preferable.

The td tags have input tags within them, for the user to make changes and then eventually submit, so if possible I would like unigue ids created for each input tag. Below is what I have. 

<div id="container">
<form id='associates'>
<table border="1"><tr>
 <th>Assoc Name</th>
 <th>Role</th>
 <th>Agile Team</th>
 <th>Agile Team 2</th>
 <th>Agile Team 3</th>
 <th>Agile Team 4</th>
 <th>Agile Team 5</th></tr>
<tr>
 <td ><input id='name' readonly value='Jordan Davis'></td>
 <td ><input id='role' readonly value='Business Analyst'></td>
 <td >  <select id ='team1'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select></td>
 <td ><select  id='team2'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team3'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team4'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
<td ><select id='team5'>
                <option value="1">Option 1 of row 1</option>
                <option value="2">Option 2 of row 1</option>
                <option value="3">Option 3 of row 1</option>
            </select>  </td>
</form></div>

Upvotes: 0

Views: 119

Answers (2)

Theo Itzaris
Theo Itzaris

Reputation: 4681

as i can understand you pass a number and according to that number you create dynamically table rows. so far so good, as for the different tag id's , you can pass array of input values, so you dont need to create unique id each time you add rows.

take a look on the javascript snippet:as you see i pass array of input elements, you can read them on the PHP file, as arrays.

$('#addRows').click(function(){
  var rows = $('input').val();
  var table = document.getElementById('persons');
  var length = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;


  for(i=0;i<rows;i++){
    console.log('ddd');
   var row = table.insertRow(length+1);//add row at the end
   //create cells
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   var cell4 = row.insertCell(3);
   var cell5 = row.insertCell(4);
   var cell6 = row.insertCell(5);
   var cell7 = row.insertCell(6);
   //ad values to cells"
    cell1.innerHTML = "<input name='firstname[]'  placeholder='name here'>";
    cell2.innerHTML = "<input name='role[]'  placeholder='role here'>";
    cell3.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
    cell4.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell5.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell6.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
     cell7.innerHTML = "<select id ='team1'> <option value='1'>Option 1 of row 1</option><option value='2'>Option 2 of row 1</option> <option value='3'>Option 3 of row 1</option></select>";
  }

});

working example on jsfiddle: http://jsfiddle.net/tornado1979/vq9pemd6/

enter image description here

hope helps, good luck.

Upvotes: 1

AlwaysNull
AlwaysNull

Reputation: 348

you can try something like this:

var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", 'ID');
    hiddenInput.setAttribute("class", "ListItem");

$('body').append(hiddenInput);

You can do this in a loop and simply append the current index to the ID for example if this was the third loop, the id could be "uniqueidentifier3"

Upvotes: 0

Related Questions