利用jQuery实现表格数据添加删除修改代码



19 75 26



特效描述:利用jQuery实现 表格数据 添加删除 修改代码,利用jQuery实现表格数据添加删除修改代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootbox.min.js"></script>
<script src="js/mejs.js"></script>

3. HTML代码

<div class="box">
    <div class="title">使用Jquery实现表格内数据的添加、删除、修改、查找</div>
    <div class="content">
        <!--搜索输入框及查询、重置按钮-->
        <div class="container content_width">
            <div class="person_search">
                <div class="search_input">
                    <div class="input-group mb-3">
                        <span>姓名:</span>
                        <input id="Ktext" type="text" class="form-control" placeholder="请输入姓名">
                    </div>
                </div>
                <div class="search_input">
                    <div class="input-group mb-3" hidden>
                        <span>工号:</span>
                        <input id="job_num" type="text" class="form-control" placeholder="请输入工号">
                    </div>
                </div>
                <div class="search_input">
                    <button class="btn btn-primary search_btn" type="button" id="search_btn">查询</button>
                    <button class="btn btn-primary search_btn" type="button" id="back_btn">重置</button>
                </div>
            </div>
            <div class="line"></div>
        </div>
        <!--添加按钮及bootstrap的模态框-->
        <div class="export">
            <button id="new_add" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#renyuan">
                <img src="img/add_two.png">
                <span>添加</span>
            </button>
            <div class="modal fade" id="renyuan">
                <div class="modal-dialog modal-lg modal_position">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">添加</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <table id="xztb" class="table">
                                <!--新修改弹窗的样式-->
                                <tbody>
                                <tr>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>姓名</label>
                                    </td>
                                    <td><input class="userName" type="text" placeholder="请输入姓名"></td>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>工号</label>
                                    </td>
                                    <td><input class="jobNum" type="number" placeholder="请输入工号"></td>
                                </tr>
                                <tr>
                                    <td class="tb_bg"><label for=""><font style="font-size: 14px; color: red;">*</font>手机号</label>
                                    </td>
                                    <td><input class="phoneNum" type="number" placeholder="请输入手机号"></td>
                                    <td class="tb_bg"><label for="">产品名称</label></td>
                                    <td><input type="text" placeholder="请输入产品名称"></td>
                                </tr>
                                <tr>
                                    <td class="tb_bg"><label for="">技能等级</label></td>
                                    <td>
                                        <select class="form-control select_down" style="font-size: 13px; color: #666;">
                                            <option>一级</option>
                                            <option>二级</option>
                                            <option>三级</option>
                                        </select>
                                    </td>
                                    <td class="tb_bg"><label for="">用户类型</label></td>
                                    <td>
                                        <select class="form-control select_down" style="font-size: 13px; color: #666;">
                                            <option>初级</option>
                                            <option>中级</option>
                                            <option>高级</option>
                                            <option>专家</option>
                                        </select>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button id="add_btn" type="button" class="btn btn-secondary">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--表格列表-->
        <table id="tb" class="table">
            <thead>
            <tr>
                <th>姓名</th>
                <th>工号</th>
                <th>手机号</th>
                <th>产品名称</th>
                <th>技能等级</th>
                <th>用户类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="show_tbody">
            <tr>
                <td>刘晓晓</td>
                <td>7652101</td>
                <td>18086667777</td>
                <td>------</td>
                <td>一级</td>
                <td>高级</td>
                <td>
                    <a href="#" class="edit">编辑</a>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
            <tr>
                <td>李磊</td>
                <td>7652102</td>
                <td>18086668888</td>
                <td>------</td>
                <td>三级</td>
                <td>专家</td>
                <td>
                    <a href="#" class="edit">编辑</a>
                    <a href="#" class="del">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 提示框/弹出层 文本框 text文本框 按钮控制 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到