点击获取页面表格中某一行的Id

示例:

1.JQ方式

示例: 通过父传子获取

JS代码

/*JQ入口函数*/
$(function () {
    /*初始页码*/
    let currentPage = 1;
    /*页面显示条数*/
    let pageSize = 5;

    /*分页条件查询*/
    searchByPage();

    function searchByPage() {
        $.post("/book/searchByPage?currentPage=" + currentPage + "&pageSize=" + pageSize,
            $("#searchForm").serialize(), function (response) {
                let str = '';
                for (let responseKey of response.data) {
                    str += `<tr bookId=${responseKey.bookId}>
                                <td>${responseKey.bookId}</td>
                                <td>${responseKey.bookName}</td>
                                <td>${responseKey.authorName}</td>
                                <td>${responseKey.firstTypeName}</td>
                                <td>${responseKey.secondTypeName}</td>
                                <td><img src=${responseKey.imgUrl} width="35px" height="35px"/></td>

                                <td>
                                    <button class="btn btn-sm  btn-info editBtn" data-toggle="modal"
                                            data-target="#modal-default">
                                        编辑
                                    </button>
                                    <button class="btn btn-sm  btn-warning deleteBtn" data-toggle="modal" data-target="#delModal">
                                        删除
                                    </button>
                                </td>
                            </tr>`
                }

                $("tbody").html(str)
                console.log(response.total)
                initPage(response.total)
                setClickUpdateDelete();
            })
    }

    /*查询所有*/
    /*    function findAll() {
            $.get("/book/page?currentPage="+currentPage+"&pageSize="+pageSize+"" , function (response){
                let str='';
                /!*遍历响应response*!/
                /!*let rer = response.data;
                for (let datum of rer) {
                    console.log(datum)
                }*!/
                for (let responseKey of response.data) {
                   str+=`<tr>
                                    <td>${responseKey.bookId}</td>
                                    <td>${responseKey.bookName}</td>
                                    <td>${responseKey.authorName}</td>
                                    <td>${responseKey.firstTypeName}</td>
                                    <td>${responseKey.secondTypeName}</td>
                                    <td><img src=${responseKey.imgUrl} width="35px" height="35px"/></td>

                                    <td>
                                        <button class="btn btn-sm  btn-info" data-toggle="modal"
                                                data-target="#modal-default">
                                            编辑
                                        </button>
                                        <button class="btn btn-sm  btn-warning" data-toggle="modal" data-target="#delModal">
                                            删除
                                        </button>
                                    </td>
                                </tr>`
                }

                $("tbody").html(str)
                console.log(response.total)
                initPage(response.total)
            })
        }
        findAll();*/


    /*获取全部数量*/

    /*初始化分页插件*/
    function initPage(total) {
        /*分页*/
        $("#pagination").pagination(total,    //分布总数量，必须参数
            {
                callback: pageChangeHandle,  //pageChangeHandle() 为翻页调用次函数。
                prev_text: "« 上一页",
                next_text: "下一页 »",
                items_per_page: pageSize, //每一页的大小
                num_edge_entries: 2,       //两侧首尾分页条目数
                num_display_entries: 5,    //连续分页主体部分分页条目数
                current_page: currentPage - 1,   //当前页索引
                load_first_page: false //不执行回调函数,避免死循环
            });
    }

    /*点击分页页码回调函数*/
    function pageChangeHandle(index) {
        currentPage = index + 1;
        searchByPage();
        console.log("当前页码索引:" + index);
    }

    /*通过父id查询分类*/
    function findTypeByParentId(pid) {
        $.get("/type/findByParentId?parentId=" + pid, (response) => {
            if (response.status==2000){
                if (pid == 0) {
                    // console.log(response);
                    let str = '<option value="-1">一级分类</option>'
                    response.data.forEach(item => {
                        // console.log("条件:"+item.typeName);
                        str += `<option value="${item.typeId}">${item.typeName}</option>`
                    })
                    $("#firstType2").html(str);
                    $("#firstType").html(str);

                } else {
                    // console.log(response);
                    let str = '<option value="-1">二级分类</option>'
                    response.data.forEach(item => {
                        // console.log("条件:"+item.typeName);
                        str += `<option value="${item.typeId}">${item.typeName}</option>`
                    })
                    $("#secondType2").html(str);
                    $("#secondType").html(str);

                }
            }

        })
    }
    findTypeByParentId(0);


    /*给select设置change切换*/
    function setChangeListener() {
        /**
         * 一二级分类
         */
        $("#firstType2").change(function () {
            console.log("change方法执行了")
            console.log($(this).val())
            findTypeByParentId($(this).val())

        })
        $("#firstType").change(function () {
            console.log("change方法执行了")
            console.log($(this).val())
            findTypeByParentId($(this).val())

        })

        /**
         * 给searchBtn搜索按钮设置点击事件
         */
        $("#searchBtn").click(function () {
            /*分页查询*/
            searchByPage();
        })

        /**
         * 给头像文件上传选择框设置change事件
         * 我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery
         * 对其操作，从而失去分界符，而使服务器不能正常解析文件。
         * processData:false,如果要发送 DOM树信息或其它不希望转换的信息,设置为 false
         */

        $("#avatar").change(function (e) {
            //有2种方式   第一种：创建一个文件的虚拟路径
            //             第二种： 创建文件的Base64格式字符串
            // 第一种：
            // var s = URL.createObjectURL(e.target.files[0]);
            // $(".bookimage").attr("src", s);

            //第二种： 把选中的文件创建base64格式字符串
            //     var fileReader  = new FileReader();
            //     fileReader.readAsDataURL(e.target.files[0]);
            //     fileReader.onload=function (result) {
            //         $(".bookimage").attr("src", result.target.result);
            //     }
            var formData = new FormData();
            /*设置key/value*/
            formData.append("avatar", e.target.files[0]);
            console.log("进入ajax")
            $.ajax({
                url: "/upload",
                type: "post",
                contentType: false,
                processData: false,
                data: formData,
                success: function (response) {
                    let s = response.data;
                    console.log(s);
                    /*添加图片路径*/
                    $(".bookimage").attr("src", s);
                    $("#imgUrl").val(response.data);
                }
            })
        })

        /**
         * 添加或者修改按钮点击事件
         */
        $("#addOrEdit").click(function () {
            //添加功能
            $.post("/book/addOrEdit",$("#addorEidtForm").serialize(),function () {
                /*添加成功刷新前端页面*/
                searchByPage();

            })
        })

        
    }
    setChangeListener();

    /**
     * 重置表单
     */
    /*添加按钮点击事件*/
    function resetFrom() {
        $("#addorEidtForm").get(0).reset();
        $(".bookimage").attr("src","");

        $(".addBookBtn").click(function () {
            resetFrom();
        })
    }
    resetFrom();


    /**
     *设置修改删除的点击事件
     */
    function setClickUpdateDelete() {
        $(".editBtn").click(function () {
            /*获取id*/
            findBookByBookId($(this).parent().parent().attr("bookId"));
            console.log("编辑按钮点击了!");
        })
        $(".deleteBtn").click(function () {
            let id = $(this).parent().parent().attr("bookId")
            console.log("外层:"+$(this).parent().parent().attr("bookId"))
            $(".delSure").click(function () {
                console.log("里层:"+id)
                delectableBookId(id);
                console.log("删除按钮点击了!");
                searchByPage();
            })
        })
    }

    /**
     * 删除
     */
    function delectableBookId(id) {
        $.get("/book/deleteBookId?bookId="+id , function (response) {
        })
    }

    /**
     * 查询条目id
     */
    function findBookByBookId(id) {
        $.get("/book/findById?bookId="+id , function (response) {
            if (response.status==2000){
                // console.log(response.data);
                findTypeByParentId(response.data.firstTypeId);
                setTimeout(function () {
                    setFromData(response.data)
                },300)
            }
        })
    }

    /**
     * 设置编辑表单数据会写
     */
    function setFromData(item) {
        $("#imgUrl").val(item.imgUrl);
        $("#bookId").val(item.bookId);
        $("#bookName").val(item.bookName);
        $("#authorName").val(item.authorName);
        $("#firstType").val(item.firstTypeId);
        $("#secondType").val(item.secondTypeId);
        $("#description").val(item.description);
        $("#bookimage").attr("src",item.imgUrl);
    }

})

HTML代码

<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="../css/_all-skins.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/dialog.css">
    <link rel="stylesheet" href="../css/pagination.css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<!-- jQuery 3 -->
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../js/adminlte.min.js"></script>
<!--JQ分页-->
<script src="../js/jquery.pagination.js"></script>
<script src="../js/book.js"></script>
<script src="../js/baseAjax.js"></script>

<body class="hold-transition skin-red  sidebar-mini">
<div class="wrapper" id="huige">
    <header class="main-header">
        <a href="#" class="logo">
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>图书管理</b></span>
        </a>
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div style="float: right;height: 50px;line-height: 50px;margin-right:25px ">
                <a href="" class="btn btn-danger">退出登录</a>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <!-- Sidebar Menu -->
        <ul class="sidebar-menu" data-widget="tree">
            <li class="header">上山打老虎</li>
            <li class="active"><a href="#"><i class="fa fa-link"></i> <span>图书管理</span></a></li>
            <li><a href="type.html"><i class="fa fa-link"></i> <span>分类管理</span></a></li>
        </ul>

    </aside>

    <div class="content-wrapper">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="form-group form-inline">
                            <div class="btn-group">
                                <button type="button" class="btn btn-danger addBookBtn" data-toggle="modal"
                                        data-target="#modal-default">添加书籍
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="fa-pull-right clearfix" style="margin-right: 20px;margin-bottom: 20px">
                        <form id="searchForm">
                            <div class="form-inline">
                                <span style="margin-right: 10px">条件查询:</span>
                                <select class="form-control" name="firstTypeId" id="firstType2">
                                    <option value="-1">一级分类</option>
                                </select>
                                <select class="form-control" name="secondTypeId" id="secondType2">
                                    <option value="-1">二级分类</option>
                                </select>
                                <input type="text" class="form-control" placeholder="请输入搜索的内容" name="search">
                                <a href="javascript:void(0)" class="btn btn-danger" id="searchBtn">搜索</a>
                            </div>
                        </form>
                    </div>

                    <div class="box-body">
                        <table id="example2" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>书籍id</th>
                                <th>书籍名称</th>
                                <th>作者</th>
                                <th>一级分类</th>
                                <th>二级分类</th>
                                <th>封面图片</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>上山打老虎</td>
                                <td>上山打老虎</td>
                                <td>上山打老虎</td>
                                <td>上山打老虎</td>
                                <td>上山打老虎</td>
                                <td>上山打老虎</td>
                                <td>
                                    <button class="btn btn-sm  btn-info" data-toggle="modal"
                                            data-target="#modal-default">
                                        编辑
                                    </button>
                                    <button class="btn btn-sm  btn-warning" data-toggle="modal" data-target="#delModal">
                                        删除
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--分页插件-->


                    </div>

                    <!--分页插件-->
                    <div id="pagination" style="text-align: right">
                    </div>
                </div>
            </div>


        </div>


    </div>

</div>


<!--编辑或者新建弹出框-->
<div class="modal fade" id="modal-default">
    <div class="modal-dialog modal-lg edit-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title title">书籍操作</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addorEidtForm">

                    <!--隐藏域,虚拟位置保存传过来的头像url-->
                    <input type="hidden" name="imgUrl" id="imgUrl">
                    <input type="hidden" name="bookId" id="bookId">


                    <div class="card-body">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">书籍名称:</label>
                            <div class="col-sm-10">
                                <input type="text" id="bookName" class="form-control" placeholder="请输入书籍名称"
                                       name="bookName">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">作者名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="authorName" placeholder="请输入作者名称"
                                       name="authorName">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">选择分类:</label>
                            <div class="col-sm-10">
                                <div class="form-inline">
                                    <select class="form-control" name="firstTypeId" id="firstType">
                                        <option value="-1">一级分类</option>
                                    </select>
                                    <select class="form-control" name="secondTypeId" id="secondType">
                                        <option value="-1">二级分类</option>

                                    </select>
                                </div>
                            </div>


                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">书籍简介:</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" placeholder="输入商品简介" name="description"
                                          id="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">封面图片</label>
                            <div class="col-sm-10">
                                <label class="btn btn-success"><input type="file" style="display:none;"
                                                                      id="avatar" accept="image/*"> 上传图片</label>
                                <!--显示图片-->
                                <img src="" alt="" width="100px" height="100px" class="bookimage" id="bookimage">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer ">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" id="addOrEdit">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


<!--删除弹出确认框-->

<div class="modal fade" id="delModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">温馨提示</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你确定要删除吗?
            </div>
            <!--justify-content-between-->
            <div class="modal-footer ">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success delSure" data-dismiss="modal">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>


</body>
</html>

Java-Controller代码

package com.sm.controller;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.sm.entity.Book;
import com.sm.entity.SearchBean;
import com.sm.httpEnum.AjaxResult;
import com.sm.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;


@ResponseBody+@RequestMapping()=@RequestController()*/
@Controller
@ResponseBody
@RequestMapping("book")
public class BookController {
    @Autowired
    private BookService bookService;

    /*一代目*/
    /*@GetMapping("findAll")
    public List<Book> findAll(){
        return bookService.findAll();
    }*/

    /*二代目*/
    /*@GetMapping("page")
    public Map<String,Object> page(int currentPage , int pageSize){
        //表示开启分页功能
        //注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
        PageHelper.startPage(currentPage,pageSize);
        List<Book> page = bookService.page();
        PageInfo<Book> bookPageInfo = new PageInfo<>(page);
        long total = bookPageInfo.getTotal();//总条目数
        Map<String,Object> map = new HashMap<>();
        map.put("data",page);
        map.put("total",total);
        return map;
    }*/

    /*三代目*/
    /*@GetMapping("page")
    *//*给个默认值,避免不传值*//*
    public AjaxResult page(@RequestParam(defaultValue = "1") int currentPage, @RequestParam(defaultValue = "5") int pageSize) {
        //表示开启分页功能
        //注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
        PageHelper.startPage(currentPage, pageSize);
        List<Book> page = bookService.page();
        PageInfo<Book> bookPageInfo = new PageInfo<>(page);
        long total = bookPageInfo.getTotal();//总条目数
        return AjaxResult.success(page, total);
    }*/

    @PostMapping("searchByPage")
    public AjaxResult searchByPage(int currentPage, int pageSize, SearchBean searchBean){
        //表示开启分页功能
        //注意:这行代码后面的第一个代码将会分页,后面的就不会再分页了
        PageHelper.startPage(currentPage, pageSize);
        List<Book> books = bookService.searchByPage(searchBean);
        PageInfo<Book> bookPageInfo = new PageInfo<>(books);
        long total = bookPageInfo.getTotal();//总条目数
        return AjaxResult.success(books, total);

    }

    /**
     * 添加
     */
    @PostMapping("addOrEdit")
    public AjaxResult addOrEdit(Book book){
        if (book.getBookId()==null){
            int row = bookService.addBook(book);
            if (row>0){
                return AjaxResult.success();
            }else {
                return AjaxResult.error();
            }
        }else {
            int row = bookService.editBook(book);
            if (row>0){
                return AjaxResult.success();
            }else {
                return AjaxResult.error();
            }
        }

    }

    /**
     * 通过id查询编辑
     */
    @GetMapping("findById")
    public AjaxResult findById(int bookId){
       Book book = bookService.findById(bookId);

        return AjaxResult.success(book);
    }

    /**
     * 删除
     */
    @GetMapping("deleteBookId")
    public AjaxResult deleteBookId(int bookId){
        int book = bookService.deleteBookId(bookId);
        return AjaxResult.success(book);
    }
}

2.Vue方式

示例: 通过绑定事件获取

JS代码

let vue = new Vue({
    el:"#app",
    data:{
        formData: {},
        tableData: []
    },
    created(){
        this.findAll();
    },
    methods:{
        findAll(){
            axios.get(`http://localhost:8088/person`).then(response => {
                console.log("进入了axios")
                this.tableData=response.data;
            });
        },
        importExcel(){

        },
        updatePerson(e){
            console.log("当前id"+e)
        },
        deletePerson(e){
            console.log("删除了"+e)
        }
    }

})

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="./dist/css/adminlte.min.css">
<link rel="stylesheet" href="./myjs/zpageNav.css">
<body>
<div id="app">
    <div class="card-header">
        <div class="execute-entity" style="float: left">
            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                        data-target="#addOrEdit"
                        @click="formData={},imgUrl='../dist/img/avatar.png'">新建
                </button>
                <a href="http://localhost:8088/person/exportExcel" class="btn btn-warning btn-sm ">导出Excel</a>
                <label style="margin: 0" class="btn btn-danger btn-sm"><input type="file" style="display: none" @change="importExcel"/>导入Excel</label>

            </div>
        </div>
    </div>
    <div>
        <table class="table table-bordered table-hover  ">
            <thead>
            <tr>
                <th style="width: 20px">#</th>
                <th>用户id</th>
                <th>用户名称</th>
                <th>用户密码</th>
                <th>用户地址</th>
                <th>用户手机</th>
                <th>用户生日</th>
                <th>用户头像</th>
                <th style="width: 150px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in tableData" :key="index">
                <td><input type="checkbox"/></td>
                <td>{{item.id}}</td>
                <td>{{item.personName}}</td>
                <td>{{item.personPwd}}</td>
                <td>{{item.personAddress}}</td>
                <td>{{item.personPhone}}</td>
                <td>{{item.personBirthday}}</td>
                <td>{{item.personImg}}</td>

                <td>
                    <button type="button" class="btn-sm btn-warning" @click="updatePerson(item.id)">修改</button>
                    <button type="button" class="btn-sm btn-danger" @click="deletePerson">删除</button>
                </td>

            </tr>
            </tbody>
        </table>
    </div>
</div>


<!--UI的-->
<script src="./plugins/jquery/jquery.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./dist/js/adminlte.min.js"></script>

<!--自己的-->
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/Excel.js"></script>
</body>

Java-Controller代码

package com.shangma.cn.Tools;


import com.shangma.cn.entity.Person;
import com.shangma.cn.entity.User;
import com.shangma.cn.service.IPersonService;
import com.shangma.cn.service.IUserService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

/**
 * <p>
 *  前端控制器
 * </p>
 * MybatisPlus代码生成器生成
 */
@RestController
@RequestMapping("person")
public class PersonController {
    @Resource
    private IPersonService iPersonService;

    @GetMapping
    public List<Person> personList(){
        return iPersonService.list();
    }
}