javascript - 每当我在JavaScript中按下按钮时如何生成唯一的ID

我想创建一个站点，一群人必须在其中添加一些数据，稍后再将它们存储到数据库中。

我不知道确切的人数和确切的行数，因此我在JavaScript中创建了一个函数，该函数在按下按钮时会生成表格，并且与行相同。

我有一些找不到解决方案的问题，这就是为什么我在这里寻求帮助:

当我按下“添加新表”按钮时，就像他进入另一页来加载它一样。我尝试使用标签，但还是一样。

当我按下“addRow”时，他再次将id(number)设置为1，但是我增加了计数器，再次我不知道这在哪里发生。

当我添加一个新表并尝试向其中添加一行时，他将行放入了第一个表，我以为发生这种情况是因为所有表都具有相同的ID，但是为什么他不添加一个排到所有人？

我想将行添加到该特定表中，然后按一下按钮。我的解决方案是向每个表添加特定的ID。

我尝试了这个:

    var tableId = 1;

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

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

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

这是我的脚本:

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

最佳答案

这是一个开始。使用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="(email@info.uvt.ro)" 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>