CODEWITHSUNDEEP
javascripthtml
Wolf Marian
Wolf Marian

Reputation: 147

How to generate a unique id everytime I press a button in JavaScript

I want to make a site where a group of people have to add some data, later I will store them into a database.

I don't know the exact number of people and the exact number of rows so I made a function in JavaScript that generates a table when a button is pressed, and same with the rows.

I have some problems that I can't find the solution, that's why I ask here for help:

  1. When I press the button "Add new Table" is like he enters on another page to load it. I tried to use tag and also but still the same.

  2. When I press on "addRow" he put the id(number) 1 again, but I incremented the counter, again I don't know where is happend this.

  3. When I add a new table and I try to add a row to it, he put the row to the first table, I was thinking that this is happend because all the tables have the same id, but why he don't add a row to all of them?

I want to add the row to that particular table where I press the button. My solution would be to add a particular id to every table.

I tried this:

    var tableId = 1; 

    document.write('<div class="window_wrap"> <table class="window"     id="idWindowTable' + tableId++ + '">' + table + '</table> </div>');

but I don't know how to increment the id in the addRow function:

    var windowTab = document.getElementById("idWindowTable");

Here is my script:

    <script>
    var table = ''; //table from genTab
    var rows = 1; //for genTab
    var cols = 3; //for genTab
    var rowCounter = 3; //starts from index 3 when add row on table 
    var nr = 1; // write the id at the number
    var tableId = 1; 



    function genTab() {

        table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';

        for(var r = 0; r < rows; r++)
        {
            table += '<tr>';
            for(var c = 0; c < cols; c++)
            {
                if(c==0)
                    table += '<td class="window_cells">' + nr++ + '</td>';
                else
                    table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
            }
            table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
        }
        document.write('<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>');
        nr = 1;
        table = '';
    }

    function addRow() {
            var windowTab = document.getElementById("idWindowTable");
            var roww = windowTab.insertRow(rowCounter++);
            var cell1 = roww.insertCell(0);
            var cell2 = roww.insertCell(1);
            var cell3 = roww.insertCell(2);
            cell1.innerHTML = nr++;
            cell1.className = "window_cells";
            cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
            cell2.className = "window_cells";
            cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
            cell3.className = "window_cells";
    }


    genTab();

      </script>

Upvotes: 4

Views: 1430

Answers (1)

mplungjan
mplungjan

Reputation: 178350

Here is a begin. Use innerHTML and remove the nr=1 in the genTab function

   var table = ''; //table from genTab
   var rows = 1; //for genTab
   var cols = 3; //for genTab
   var rowCounter = 3; //starts from index 3 when add row on table 
   var nr = 1; // write the id at the number
   var tableId = 1;



   function genTab() {

     table += '<tr> <th class="window_cells" colspan="3"><form class="window_form"><span>Cordonator: </span><input type="text" name="prof_name" placeholder="Prof. dr. Nume Prenume" required/><input type="email" name="prof_email" placeholder="([email protected])" required/><input type="submit" value="Submit"/></form></th> </tr> <tr><td class="window_cells">Nr</td> <td class="window_cells" id="test">Tema</td> <td class="window_cells">Detalii</td> </tr>';

     for (var r = 0; r < rows; r++) {
       table += '<tr>';
       for (var c = 0; c < cols; c++) {
         if (c == 0)
           table += '<td class="window_cells">' + nr+++'</td>';
         else
           table += '<td class="window_cells"> <textarea rows="4" cols="30"> </textarea> </td>';
       }
       table += '</tr> <tr> <th class="window_cells" colspan="3"> <form> <input type="button" value="Preview"/> <input type="submit" value="Submit row"/> <input type="button" value="Add new Table" onClick="genTab()"/> <input id="idRowButton" type="button" value="Add row" onClick="addRow()"/> </form> </th> </tr>';
     }
     document.getElementById("content").innerHTML+='<div class="window_wrap"> <table class="window" id="idWindowTable">' + table + '</table> </div>';
 
     table = '';
   }

   function addRow() {
     var windowTab = document.getElementById("idWindowTable");
     var roww = windowTab.insertRow(rowCounter++);
     var cell1 = roww.insertCell(0);
     var cell2 = roww.insertCell(1);
     var cell3 = roww.insertCell(2);
     cell1.innerHTML = nr++;
     cell1.className = "window_cells";
     cell2.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
     cell2.className = "window_cells";
     cell3.innerHTML = "<textarea rows=\"4\" cols=\"30\"> </textarea>";
     cell3.className = "window_cells";
   }

   window.onload = function() {
     genTab();
   }
<div id="content"></div>

Upvotes: 1

Related Questions