动态表格（ajax+json），添加点击事件，获取点击按钮所在行的值

效果：（后期可以自己加css效果）

查找功能

1、数据库连接

package com.gk.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DaoConnect {
    public static Connection getConnect(){
        Connection con = null;
        String driver = "com.mysql.cj.jdbc.Driver";
        String url = "jdbc:mysql://localhost:3306/test?serverTimezone=UTC";
        String username = "root";
        String password = "123456";
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        try {
            con = DriverManager.getConnection(url, username, password);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        if(con != null){
            System.out.println("连接成功");
        }
        return con;
    }
}

2、实体类

package com.gk.pojo;

public class Commodity {
    private  int id;
    private String name;
    private String brand;
    private String state;
    private double praise;
    private int sell;
    private double grade;

    public Commodity(int id, String name, String brand, String state, double praise, int sell, double grade) {
        this.id = id;
        this.name = name;
        this.brand = brand;
        this.state = state;
        this.praise = praise;
        this.sell = sell;
        this.grade = grade;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getBrand() {
        return brand;
    }

    public void setBrand(String brand) {
        this.brand = brand;
    }

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public double getPraise() {
        return praise;
    }

    public void setPraise(double praise) {
        this.praise = praise;
    }

    public int getSell() {
        return sell;
    }

    public void setSell(int sell) {
        this.sell = sell;
    }

    public double getGrade() {
        return grade;
    }

    public void setGrade(double grade) {
        this.grade = grade;
    }

    @Override
    public String toString() {
        return "Commodity{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", brand='" + brand + '\'' +
                ", state='" + state + '\'' +
                ", praise=" + praise +
                ", sell=" + sell +
                ", grade=" + grade +
                '}';
    }
}

3、数据库查找数据，并封装成list（Commodity类型）

package com.gk.dao;

import com.gk.pojo.Commodity;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class FindShop {
    public List<Commodity> findAll() throws SQLException {
        Connection con = DaoConnect.getConnect();
        String sql = "select * from shop";
        PreparedStatement pre = con.prepareStatement(sql);
        ResultSet re = pre.executeQuery();
        List<Commodity> list = new ArrayList<>();
        while(re.next()){
            int id = re.getInt(1);
            String name = re.getString(2);
            String brand = re.getString(3);
            String state = re.getString(4);
            double praise = re.getDouble(5);
            int sell = re.getInt(6);
            double grade = re.getDouble(7);
            Commodity com = new Commodity(id,name,brand,state,praise,sell,grade);
            list.add(com);
        }
        con.close();
        re.close();
        return list;
    }

}

4、servlet将list数据封装成json并传到前端

package com.gk.servlet;

import com.gk.dao.FindShop;
import com.gk.pojo.Commodity;
import net.sf.json.JSONArray;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "ShopServlet", urlPatterns = "/ShopServlet")
public class ShopServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        FindShop find = new FindShop();
        List<Commodity> list = new ArrayList<>();
        try {
            list = find.findAll();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        net.sf.json.JSONArray json = JSONArray.fromObject(list);
        String json_str = json.toString();
        out.print(json_str);
        out.flush();
        out.close();
    }
}

5、前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>购物表</title>
</head>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>


<script>
    $(document).ready(function () {
        $.ajax({
            type:"post",
            url:"ShopServlet",
            dataType:"json",
            success:function (data){
                var t = $("#t-body");
                var d = $(data);
                for(var i=0; i<data.length; i++){

                    t.append("<tr>"
                        +"<td class='id'>"+data[i].id+"</td>"
                        +"<td >"+data[i].name+"</td>"
                        +"<td>" +data[i].brand+"</td>"
                        +"<td>"+data[i].state+"</td>"
                        +"<td>"+data[i].praise+"</td>"
                        +"<td>"+data[i].sell+"</td>"
                        +"<td>"+data[i].grade+"</td>"
                        +"<td>"+"<button class='btn'>"+"加入购物车"+"</button>"+"</td>"
                        +"</tr>");
                }
                $("#t-body").on('click','.btn',function(){
                    alert($(this).parents("tr").find(".id").text());
                })
            },
            error:function (){
                alert("失败了");
            }
        })
    })

    function find(){
        $("#t-body").empty();
        var tt = $("#text1").val();
        $.ajax({
            type:"post",
            url:"ShopServlet",
            dataType:"json",
            success:function (data){
                var t = $("#t-body");
                var d = $(data);
                var check = 0;
                for(var i=0; i<data.length; i++){
                    if(($.trim(tt) == $.trim(data[i].name)) || tt == ""){
                        t.append("<tr>"
                            +"<td class='id'>"+data[i].id+"</td>"
                            +"<td >"+data[i].name+"</td>"
                            +"<td>" +data[i].brand+"</td>"
                            +"<td>"+data[i].state+"</td>"
                            +"<td>"+data[i].praise+"</td>"
                            +"<td>"+data[i].sell+"</td>"
                            +"<td>"+data[i].grade+"</td>"
                            +"<td>"+"<button class='btn'>"+"加入购物车"+"</button>"+"</td>"
                            +"</tr>");
                        check = 1;
                    }
                }
                if(check == 1){
                    alert("查找成功");
                }else if(check == 0){
                    alert("查找失败，请重新查询");
                }
                $("#t-body").on('click','.btn',function(){
                    alert($(this).parents("tr").find(".id").text());
                })
            }
        })
    }

</script>

<body>

<table border="0" align="center" id="mytable">
    <tr>
        <th align="center"><p2>商品列表</p2></th>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td align="left">
                商品名称：<input type="text" id="text1" name="name">
            <input type="button" id="bt-1" value="查找" onclick="find()">
        </td>
    </tr>
    <tr>
        <td align="right">
            <button><a href="FindCarServlet">进入购物车</a></button>
        </td>
    </tr>
</table>
<div style="height: 20px"></div>

<table border="1" cellspacing="0" align="center">
    <thead>
        <tr>
            <td>编号</td>
            <td>名称</td>
            <td>所属品牌</td>
            <td>描述</td>
            <td>价格</td>
            <td>销量</td>
            <td>买家评价</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody id="t-body">

    </tbody>
</table>

</body>
</html>