使用 javascript 创建动态插入表单

Question

您好，我有以下代码：

<form method="post" action="catalog2.php">

    <div id="tabella" class="table-responsive">

        <script>
            var numrighe = prompt("Numero di prodotti da inserire", "Numero prodotti");

            alert("stampo " + numrighe);

            mytable ="<table class="table table-bordered table-hover table-striped">";
            mytable +="<thead>";
            mytable +="<tr><th>Cod</th><th>Description</th><th>Specifics</th></tr>";
            mytable +="</thead><tbody><tr>";

            for (var i = 0; i < numrighe; i++) 
            {
              if (i % 3 == 1 && i != 0) 
              {
                mytable += "</tr><tr>";
              }

              mytable += "<td><input type="text" maxlength=50 name="cod"" + i + " size=35></td>";
              mytable += "<td><input type="text" maxlength=100 name="desc"" + i + " size=30></td>";
              mytable += "<td><input type="text" maxlength=100 name="spec"" + i + " size=30>";

            }

            mytable +="</tr></tbody></table>";

            var div = document.getElementById('tabella');

            div.appendChild(mytable);

        </script>

    <center><input type="submit" value="Inserisci valori"></center>
  </div>
</form>

我想打印一个具有动态行数的表单 table，以便在下一页使用 PHP 代码。

如果我尝试只用第一行来执行它，它会起作用。但是，如果我添加其余代码，它就不起作用了。

Answer 1

您对 Javascript 和 jQuery 感到困惑。将脚本标签编辑为：

   var mytable =$("<table class="table table-bordered table-hover table-striped">");
   mytable.html("<thead>");
   mytable.html(mytable.html()+"<tr><th>Cod</th><th>Description</th><th>Specifics</th></tr>");
   mytable.html(myTable.html()+"</thead><tbody><tr>");

   for (var i = 0; i < numrighe; i++) 
   {
     if (i % 3 == 1 && i != 0) 
        mytable.html(myTable.html()+"</tr><tr>");
     mytable.html(myTable.html()+"<td><input type="text" maxlength=50 name="cod"" + i + " size=35></td>");
     mytable.html(myTable.html()+"<td><input type="text" maxlength=100 name="desc"" + i + " size=30></td>");
     mytable.html(myTable.html()+"<td><input type="text" maxlength=100 name="spec"" + i + " size=30>");

   }

     mytable.html(myTable.html()+"</tr></tbody></table>");

     var div = document.getElementById('tabella');
     div.appendChild(mytable);

并且不要忘记在头部添加 jQuery 才能正常工作

Answer 2

尝试使用此 javascript 代码

<form method="post" action="catalog2.php">
    <div id="tabella" class="table-responsive">
        <script>
            var numrighe = prompt("Numero di prodotti da inserire", "Numero prodotti");
            alert("stampo " + numrighe);
            mytable = "<table class=\"table table-bordered table-hover table-striped\">";
            mytable += "<thead>";
            mytable += "<tr><th>Cod</th><th>Description</th><th>Specifics</th></tr>";
            mytable += "</thead><tbody><tr>";
            for (var i = 0; i < numrighe; i++) {
                mytable += "<td><input type=\"text\" maxlength=50 name=\"cod\"" + i + " size=35></td>";
                mytable += "<td><input type=\"text\" maxlength=100 name=\"desc\"" + i + " size=30></td>";
                mytable += "<td><input type=\"text\" maxlength=100 name=\"spec\"" + i + " size=30>";
                if (i % 3 == 1 && i != 0) {
                    mytable += "</tr><tr>";
                }
            }
            mytable += "</tr></tbody></table>";
            var div = document.getElementById('tabella');
            div.innerHTML = mytable + div.innerHTML;
            //div.innerHTML is concatenated so that the old html is not lost.
        </script>
        <center>
            <input type="submit" value="Inserisci valori">
        </center>
    </div>

</form>

使用 javascript 创建动态插入表单

Creating dynamic insert form with javascript

html

javascript

forms

dynamic