javascript - HTML 加载用户在单击按钮时输入的输入字段数

Question

我正在制作一个表单，用于在数据库中创建一个表(与我们在 PHPMyadmin 中做的事情相同，我只是给它一个 UI)我有这些输入字段

<div class="col-md-12">
        <form method="post" class="form-horizontal" action="" style="">

          <div class="col-md-3">
           <strong>Table name</strong> <input type="text" class="form-control" name="table_name" required>
                <br>
                </div>
                <div class="col-md-3">
                <strong>Number of Columns</strong> <input type="text" class="form-control" name="table_column" required>
                </div>       
        </form>
         <div class="col-md-1">
                <br>
                <button type="" class='btn btn-primary load_table' >Create </button>
                </div>
                </div>

当按下创建按钮时，它会进入此

    $(".load_table").click(function()
  {

        var name = document.getElementsByName('table_name')[0].value;
        var columns = document.getElementsByName('table_column')[0].value;
        document.getElementById("form").style.visibility = 'visible';

    });

下面这个带有 id=form 的表单最初是隐藏的，现在被设置为可见。

 <form method="post" class="form-horizontal" id="form" action="" style="visibility:hidden">   


    <div class="col-md-3">

        <strong>Name</strong> <input type="text" class="form-control" name="city">
        <br>
        </div>
        <div class="col-md-3">
        <strong>Type</strong> <input type="text" class="form-control" name="country">
        <br>
        </div>
        <div class="col-md-3">
        <strong>Length/value</strong> <input type="text" class="form-control" name="region_id">
        <br>
        </div>

        <div class="col-md-2">
        <br>
        <button class="btn btn-primary form-control" id="button1" name="insert" value="insert">Submit</button>
      </div>

    </div>

</form>

我的目标是动态生成用户输入的列数作为总列数，就像在 phpmyadmin 创建表屏幕上完成的那样。最好的方法是什么？

Answer 1

做一些这样的事情..

var columnCount=3;//get Your column Count
for(i=1;i <= columnCount ;i++)
  {
  document.getElementById('form').innerHTML+=getFormColumn(i);
  if(i==columnCount)
  {
  document.getElementById('form').innerHTML+="<input type='submit' value='Create Table'>";
   } 
  }


function getFormColumn(i)
{
 return "<label id='name_"+i+"'>Name</label><input type='text' name='name[]'><label id='name_"+i+"'>Type</label><input type='text' name='type[]'><br/>";
}

<form id='form' action='YourUrl' method='post'>

</form>