我想點擊按鈕后自動增加表格行

Question

嗨，我的問題是自動增加表格行。 實際上，當我單擊GET按鈕時，產品類型和產品名稱值是從數據庫中獲取的。 在這里，獲得這些值之后，我將再次基於該ID給出另一個ID，以獲取值。 但這並沒有設置在另一行。 這是我的java代碼和jsp ：

Class.forName("com.mysql.jdbc.Driver");

System.out.println("driver loaded");
System.out.println("Driver is loaded");
Connection con= (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/charms?user=root&password=root");
System.out.println("Connection created");
Statement st =con.createStatement();
String query="select * from product where ProductType_v='"+a+"' and ProductId_v='"+b+"'";
ResultSet rs = (ResultSet)st.executeQuery(query);
int i=0;
    while(rs.next())
    {
        i++;
        request.getSession().setAttribute("edit","success");
        request.getSession().setAttribute("proType ", rs.getString("ProductType_v"));
        request.getSession().setAttribute("proId", rs.getString("ProductId_v"));
        request.getSession().setAttribute("strength", rs.getString("Strength_v"));
        request.getSession().setAttribute("proName", rs.getString("ProductName_v"));
        request.getSession().setAttribute("brand", rs.getString("BrandName_v"));
        request.getSession().setAttribute("generic", rs.getString("GenricName_v"));
        request.getSession().setAttribute("uom", rs.getString("UOM_v"));
        request.getSession().setAttribute("formE", rs.getString("FormE_v"));
        request.getSession().setAttribute("presReqd", rs.getString("PresReqd_v"));
    }
    if(i==0)
    {
        request.getSession().setAttribute("edit", "fail");
    }
}
catch(Exception e)


jsp code

<tr>  
    <td>
        <input class="textfield-form-date-req" type="text" id="pro_type">
    </td>
    <%
        if(editStatus =="success")
        {
    %>
    <script type="text/javascript">
        document.getElementById("pro_type").value='<%=session.getAttribute("proType")%>';
    </script>
    <%
    }
    <td>
        <input class="textfield-form-date-req" type="text" id="pro_id">
    </td>
    <% 
        if(editStatus =="success")
        {
    %>
    <scripttype="text/javascript">
        document.getElementById("pro_id").value='<%=session.getAttribute("proName")%>';
    </script>
    <% 
    }
    %>                  
    <td></td>
    <td></td>
    <td></td> 
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>

Answer 1

我已經用ajax為您創建了一個樣本。 它從server side獲取數據並將其附加到現有表中。

我使用的jar文件是，

jackson-all-1.9.0.jar-將Java對象轉換為json格式
servlet-api-2.4.jar-用於servlet

我的TableAppend.jsp將是

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
<script type="text/javascript">
        $(document).ready(function() {

            //alert("DOM is ready");

        });

        function sendData() {

            $.ajax({
                type : 'POST',
                url : "TableAppend",
                data : "name=" + $('#name').val() + "&age=" + $('#age').val()
                        + "&sid=" + new Date(),
                dataType : 'html',
                success : function(result) {
                    //alert("Result ::::>>> "+result);
                    if(result != null && $.trim(result) != "" && result != undefined){
                        var json = JSON.parse(result);
                        //alert(json.name);
                        //alert(json.age);
                        appendToTable(json.name, json.age);
                    }

                },
                error : function(e) {
                    alert('Error in Processing');
                }

            });
        }

        function appendToTable(name, age) {
            var tr = "<tr><td>" + name + "</td><td>" + age + "</td></tr>"
            $('#mytable').append(tr);
        }
    </script>
</head>
<body>
    Name :
    <input type="text" id="name" name="name" /> Age :
    <input type="text" id="age" name="age" />

    <input type="button" value="Append to table" onclick="sendData()">
    <br></br>
    <br></br>
    <br></br>
    <table id="mytable" border="1">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>HumanBeing</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Saideep</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

我的TableAppend.java servlet將是

public class TableAppend extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * Default constructor. 
     */
    public TableAppend() {
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        response.setCharacterEncoding("UTF-8");
        response.setContentType("UTF");
        PrintWriter out = response.getWriter();

        request.setCharacterEncoding("UTF-8");

        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String json ="";
        System.out.println("-----------------");
        if(name != null && age != null){
            TableAppendPojo obj = new TableAppendPojo();
            obj.setName(name);
            obj.setAge(age);

            ObjectMapper mapper = new ObjectMapper();
            json = mapper.writeValueAsString(obj);
            System.out.println("json : "+json);
        }
        out.println(json);
    }

}

然后， java class將是

public class TableAppendPojo {

    private String name;
    private String age;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAge() {
        return age;
    }
    public void setAge(String age) {
        this.age = age;
    }


}

注意：請在您的代碼中應用以上邏輯。 就您而言，您不需要從UI提供數據。 您檢索來自數據database中servlet 。所以請從轉換檢索數據database到json格式，並追加到table 。

希望這可以幫助。

我想點擊按鈕后自動增加表格行

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-12 10:39:58

我想點擊按鈕后自動增加表格行

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-12 10:39:58

解決方案1
1 已采納 2014-03-12 10:39:58