每次我在JavaScript中按下按钮时如何生成唯一ID

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.

我不知道确切的人数和确切的行数,所以我在JavaScript中创建了一个函数,当按下按钮时生成一个表,并且与行相同。

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.

   当我按下“addRow”时,他再次输入id(数字)1,但是我增加了计数器,再次我不知道发生了什么。

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?

   当我添加一个新表并尝试向其添加一行时,他将该行放到第一个表中,我认为这是发生的,因为所有表都具有相同的ID,但为什么他不添加一行对他们所有人?

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.

我想将行添加到我按下按钮的特定表中。我的解决方案是为每个表添加一个特定的id。

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:

但我不知道如何在addRow函数中增加id:

    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>

1 个解决方案

#1

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

这是一个开始。使用innerHTML并删除genTab函数中的nr = 1

   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="([e-mail])" 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>