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>

我想打印一个包含动态行数的表格表，以便在下一页中使用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创建动态插入表单

2 个答案: