Question

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

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

我遇到了一些无法找到解决方案的问题，这就是我在这里寻求帮助的原因：

当我按下“添加新表”按钮时，就像他进入另一页加载它一样。我尝试使用标签，但仍然相同。
当我按下“addRow”时，他再次输入id（数字）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>

Answer 1

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

＆＃13;

   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();
   }

＆＃13;

<div id="content"></div>

＆＃13;

每当我按下JavaScript

1 个答案: