Javascript 如何在可参数化请求中生成多个列？_Javascript_Jquery_Html

Javascript 如何在可参数化请求中生成多个列？

javascript jquery html

Javascript 如何在可参数化请求中生成多个列？,javascript,jquery,html,Javascript,Jquery,Html,我必须向html表中添加一行，但它不起作用。这是我的代码和muy表单。我想知道如何在modelattribute中存储多个元素，以及如何在这个请求中使用正则表达式来创建多个列？你能帮我吗 <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Creating database: Handing Form Submission</title&g

我必须向html表中添加一行，但它不起作用。这是我的代码和muy表单。我想知道如何在modelattribute中存储多个元素，以及如何在这个请求中使用正则表达式来创建多个列？你能帮我吗

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Creating database: Handing Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<body>
    <h1>Form</h1>
    <form action="#" th:action="@{/test}" th:object="${db}" method="post">
        <p>Database_Name: <input type="text" th:field="*{Database_Name}" /></p>
        <p>Table_Name: <input type="text" th:field="*{Table_Name}" /></p>
        <div class="form_container">

    <h3>Création de la base de données</h3>

    <table id="table" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>field</th>
                <th>Size</th>
                <th>Type</th>
                <th>null</th>

                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input id="field" type="text" name="field" maxlength="255"  required="required"/></td>

                <td><input id="Size" type="text"  name="Size" maxlength="255" required="required"/></td>
                <td><SELECT id="Type" name="Type">
        <OPTION VALUE="varchar">varchar</OPTION>
        <OPTION VALUE="int">int</OPTION>
        <OPTION VALUE="text">long</OPTION>
        <OPTION VALUE="float">float</OPTION>
        <OPTION VALUE="double">double</OPTION>
        <OPTION VALUE="Date">Date</OPTION>
        <OPTION VALUE="Time">Time</OPTION>
        <OPTION VALUE="Year">Year</OPTION>
        <OPTION VALUE="Real">Real</OPTION>
        <OPTION VALUE="Boolean">Boolean</OPTION>
        <OPTION VALUE="longText">longText</OPTION>
        <OPTION VALUE="Binary">Binary</OPTION>
    </SELECT></td>

     <td><SELECT id="null" name="nullabilité">
        <OPTION VALUE="null">null</OPTION>
        <OPTION VALUE="not null">not null</OPTION>

        </SELECT></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
 <!--    <input type="button" value="Add Row" id="add_ExpenseRow.ID" /> -->
    <div id="myDynamicTable">
<input type="button" value="Add Row" id="add" />

</div>
</div> <!-- END form_container -->

        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
    </form>
    <script src="jquery.js"></script>
   <script>
   $("#add").click(function(){
       $('#table tbody').append('<tr><td>'+$('#field').val()+'</td><td>'+$('#Size').val()+'</td><td>'+$('#Type').val()+'</td><td>'+$('#null').val()+'</td></tr>');     
   })
   </script>
</body>
</html>




package demo;

import java.sql.Connection;
import java.sql.DatabaseMetaData;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import org.springframework.boot.autoconfigure.web.ErrorController;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;



@Controller
class TestController implements ErrorController{

    String login="root";
    String pwd="";


    private static final String PATH = "/error";
// En cas d'érreur
        @RequestMapping(value = PATH)
        public String error() {
            return "Error";
        }
        @Override
        public String getErrorPath() {
            return PATH;
        }
       // Afficher le formulaire de création de base de données
    @RequestMapping(value="/test", method=RequestMethod.GET)
    public String test(Model model){
        try {

        DetailsDatabase db=new DetailsDatabase();

        model.addAttribute("db", new DetailsDatabase());
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "hello";
    }
    //Créer la base de données (submit)
      @RequestMapping(value="/test", method=RequestMethod.POST)
        public String DatabaseSubmit(@ModelAttribute DetailsDatabase db, Model model) {
            model.addAttribute("db",db);

try {
    Class.forName("com.mysql.jdbc.Driver");
    // on commence par se connecter à la base factice
     String url="jdbc:mysql://localhost:3306";
        Connection conn = DriverManager.getConnection(url,login,pwd);

    // on crée la base et on récupère une Connection
        Statement ps1=conn.createStatement();
        ps1.execute("CREATE DATABASE " +db.getDatabase_Name());
        ps1.close();
         url="jdbc:mysql://localhost:3306/"+db.getDatabase_Name();
       conn = DriverManager.getConnection(url,login,pwd);
        Statement ps2=conn.createStatement();
          ps2.execute("CREATE TABLE "  +db.getTable_Name() +"(" +db.getField() +" " +db.getType()+"("+db.getSize()+")" +db.getNullabilité()+");");
         ps2.close();
    // on peut finalement fermer notre Connection conn qui ne nous sers plus à rien
} catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();

}
return "result";
        }
public static boolean existe(Connection conn, String nomTable)
        throws SQLException{
boolean existe;
DatabaseMetaData dmd = conn.getMetaData();
ResultSet tables = dmd.getTables(conn.getCatalog(),null,nomTable,null);
existe = tables.next();
tables.close();
return existe;  
}


}






package demo;

public class DetailsDatabase {

    private String Database_Name;
    private String Table_Name;
    private String  field;
    private int size;
    private String type;
   private String nullabilité;

    //private boolean Auto_Increment;
    public String getDatabase_Name() {
        return Database_Name;
    }
    public void setDatabase_Name(String database_Name) {
        Database_Name = database_Name;
    }
    public String getTable_Name() {
        return Table_Name;
    }
    public void setTable_Name(String table_Name) {
        Table_Name = table_Name;
    }
    public String getField() {
        return field;
    }
    public void setField(String field) {
        this.field = field;
    }
    public int getSize() {
        return size;
    }
    public void setSize(int size) {
        this.size = size;
    }
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getNullabilité() {
        return nullabilité;
    }
    public void setNullabilité(String nullabilité) {
        this.nullabilité = nullabilité;
    }

    @Override
    public String toString() {
        return "DetailsDatabase [Database_Name=" + Database_Name
                + ", Table_Name=" + Table_Name + ", field=" + field + ", size="
                + size + ", type=" + type + ", nullabilité=" + nullabilité
                + "]";
    }



}


创建数据库：处理表单提交
形式
数据库名称：
表格名称：
多涅斯基地酒店
领域
大小
类型
无效的
瓦尔查尔
int
长的
浮动
双重的
日期
时间
年
真实的
布尔值
长文
二元的
无效的
非空

$（“#添加”）。单击（函数（）{
$（“#表体”）.append（'+$（'#字段'）.val（）++'+$（'#大小'）.val（）++'+'+$（'#类型'）.val（）++'+$（'#null'）.val（）++''>）；
})
包装演示；
导入java.sql.Connection；
导入java.sql.DatabaseMetaData；
导入java.sql.DriverManager；
导入java.sql.ResultSet；
导入java.sql.SQLException；
导入java.sql.Statement；
导入org.springframework.boot.autoconfigure.web.ErrorController；
导入org.springframework.stereotype.Controller；
导入org.springframework.ui.Model；
导入org.springframework.web.bind.annotation.ModelAttribute；
导入org.springframework.web.bind.annotation.RequestMapping；
导入org.springframework.web.bind.annotation.RequestMethod；
@控制器
类TestController实现ErrorController{
String login=“root”；
字符串pwd=“”；
私有静态最终字符串路径=“/error”；
//恩卡斯德雷尔酒店
@请求映射（值=路径）
公共字符串错误（）{
返回“错误”；
}
@凌驾
公共字符串getErrorPath（）{
返回路径；
}
//附加在规定的基础上
@RequestMapping（value=“/test”，method=RequestMethod.GET）
公共字符串测试（模型）{
试一试{
DetailsDatabase db=新的DetailsDatabase（）；
addAttribute（“db”，新的DetailsDatabase（））；
}捕获（例外e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
回复“你好”；
}
//德多内斯基地酒店（提交）
@RequestMapping（value=“/test”，method=RequestMethod.POST）
公共字符串数据库提交（@modeldattribute DetailsDatabase db，Model Model）{
model.addAttribute（“db”，db）；
试一试{
Class.forName（“com.mysql.jdbc.Driver”）；
//开始连接连接器
String url=“jdbc:mysql://localhost:3306";
Connection conn=DriverManager.getConnection（url、登录名、pwd）；
//论récupère-une连接的基础
语句ps1=conn.createStatement（）；
执行（“创建数据库”+db.getDatabase_Name（））；
ps1.close（）；
url=“jdbc:mysql://localhost:3306/“+db.getDatabase_Name（）；
conn=DriverManager.getConnection（url、登录名、pwd）；
语句ps2=conn.createStatement（）；
ps2.execute（“CREATE TABLE”+db.getTable_Name（）+”（“+db.getField（）+”+db.getType（）+”（“+db.getSize（）+”）“+db.getNullabilité（）+”；”）；
ps2.close（）；
//关于最终要素fermer-notre连接
}捕获（例外e）{
//TODO自动生成的捕捉块
e、 printStackTrace（）；
}
返回“结果”；
}
公共静态布尔存在（连接连接，字符串表）
抛出SQLException{
布尔存在；
DatabaseMetaData dmd=conn.getMetaData（）；
ResultSet tables=dmd.getTables（conn.getCatalog（），null，nomTable，null）；
existe=tables.next（）；
tables.close（）；
退出；
}
}
包装演示；
公共类详细信息数据库{
私有字符串数据库名称；
私有字符串表名称；
私有字符串字段；
私有整数大小；
私有字符串类型；
私有字符串nullabilité；
//私有布尔自动递增；
公共字符串getDatabase_Name（）{
返回数据库名称；
}
public void setDatabase_Name（字符串数据库_Name）{
数据库名称=数据库名称；
}
公共字符串getTable_Name（）{
返回表名；
}
公共void可设置_名称（字符串表_名称）{
Table_Name=Table_Name；
}
公共字符串getField（）{
返回字段；
}
公共无效设置字段（字符串字段）{
this.field=字段；
}
公共int getSize（）{
返回大小；
}
公共无效设置大小（整型大小）{
这个。大小=大小；
}
公共字符串getType（）{
返回类型；
}
公共void集合类型（字符串类型）{
this.type=type；
}
公共字符串getNullabilité（）{
返还不可撤销权；
}
public void setNullabilité（字符串nullabilité）{
这个。nullabilité=nullabilité；
}
@凌驾
公共字符串toString（）{
return“DetailsDatabase[Database_Name=“+Database_Name
+，Table_Name=“+Table_Name+”，field=“+field+”，size=“
+size+”，type=“+type+”，nullabilité=“+nullabilité”
+ "]";
}
}

能否在标题部分添加以下代码

<script type="text/javascript">
    $(document).ready(function() {
       $("#add").click(function(){
           $('#table tbody').append('<tr><td>'+$('#field').val()+'</td><td>'+$('#Size').val()+'</td><td>'+$('#Type').val()+'</td><td>'+$('#null').val()+'</td></tr>');  
       });
    });
</script>


$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（“#表体”）.append（'+$（'#字段'）.val（）++'+$（'#大小'）.val（）++'+'+$（'#类型'）.val（）++'+$（'#null'）.val（）++''>）；
});
});

不，我没有任何错误，但在我的表单中，用户可以输入多于一行，这是我要创建的表的列，但在我的请求中，我有可能生成一列。它已经添加了，我不了解