Jquery脱离数据库在前端进行表格增删改查

最新推荐文章于 2022-11-18 22:55:18 发布

纵稚

最新推荐文章于 2022-11-18 22:55:18 发布

阅读量282

点赞数

分类专栏：表格增删改查文章标签： jQuery 表格操作增删改查

本文链接：https://blog.csdn.net/Q2650173384/article/details/101050574

版权

表格增删改查专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个简易的表格增删改查

废话不多说上代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        * {
        font-family:'宋体';
        font-size:16px;
        }
        #tb, #tb td {
            border: 1px solid orange;
            border-collapse: collapse;
        }

        #tb2, #tb2 th, #tb2 td{
            border-collapse: collapse;
            border: 1px solid blue;
            text-align:center;
        }

            #tb2 th {
                background-color: #caf0fa;
            }
    </style>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script>
        function btnAdd() {
            var loginId = $("#loginId").val();
            var userName = $("#userName").val();
            var sex = $("input[name='sex']:checked").val();
            var edu = $("#sel option:selected").val();
            var email = $("#email").val();
            var hobbys = "";
            $("input[name='hobby']:checked").each(function (i) {//把所有被选中的复选框的值拼接成字符串
                    hobbys += $(this).val()+",";
            });
            hobbys = hobbys.substring(0, hobbys.lastIndexOf(','));//截取掉最后一个逗号

            $("#mytb").append("<tr><td>" + loginId + "</td><td>" + userName + "</td><td>" + sex + "</td><td>" + edu + "</td><td>" + email + "</td><td>" + hobbys + "</td><td><button onclick='btnedt(this);' style='border:1px solid blue;color:blue'>编辑</button></td><td><button onclick='btndel(this);' style='border:1px solid blue;color:blue'>删除</button></td><tr>");
        }
        function btndel(obj) {
            var tr = obj.parentNode.parentNode;//拿到按钮所在行
            if(confirm('确定删除'+tr.children[1].innerText+"?")){//如果点击确认则 进行删除
                $(tr).detach();//移除该tr
            }
        }
        function btnReset() {
            window.location.href = window.location.href;//刷新页面 
        }
        var beforeArry = new Array();
        function btnedt(obj) {
            var tr = obj.parentNode.parentNode;//拿到按钮所在行
            //拿到行的所有列
            var tds=tr.children;
            //将修改前的值 存到数组中
            beforeArry[0] = tds[0].innerText;
            beforeArry[1] = tds[1].innerText;
            beforeArry[2] = tds[2].innerText;
            beforeArry[3] = tds[3].innerText;
            beforeArry[4] = tds[4].innerText;
            beforeArry[5] = tds[5].innerText;

            //将所在行进入编辑模式
            tds[0].innerHTML = "<input value='" + beforeArry[0] + "' size='8'/>";
            tds[1].innerHTML = "<input value='" + beforeArry[1] + "'  size='8'/>";
            tds[2].innerHTML = "<input type='radio' name='esex' value='男' />男 <input type='radio' name='esex' value='女' />女";
            $("[name='esex'][value='" + beforeArry[2] + "']").prop("checked", "checked");//选中原有的sex
            tds[3].innerHTML = "<select id='esel' style='width:100px'><option value='高中' >高中</option><option value='中专'>中专</option><option value='大专'>大专</option><option value='本科'>本科</option><option value='研究生'>研究生</option><option value='硕士'>硕士</option><option value='博士'>博士</option></select>";
            $("#esel>option").each(function (i, e) {//遍历所有id为esel下的option 
                if ($(this).val() == beforeArry[3]) {//如果该option的值=原有值则选中
                    $(this).attr("selected", "selected");//选中该option 设置该属性 selected=selected
                }
            })
            tds[4].innerHTML = "<input type='email' value='" + beforeArry[4] + "' size = '10' id='eemail'/>";
            tds[5].innerHTML = "<input type='checkbox' value='唱歌' name='hobbys' />唱歌 <input type='checkbox' value='跳舞' name='hobbys' />跳舞<input type='checkbox' value='LOL' name='hobbys' />LOL<br /><input type='checkbox' value='DOTA' name='hobbys' />DOTA<input type='checkbox' value='游泳' name='hobbys' />游泳 <input type='checkbox' value='看书' name='hobbys' />看书";
            var arry = beforeArry[5].split(',');
            for (var i = 0; i < arry.length; i++) {//循环数组得到每个爱好
                $("[name='hobbys'][value='" + arry[i] + "']").prop("checked", "checked");//选中所有已存在的爱好
            }
            tds[6].innerHTML = "<button style='border:1px solid blue;color:blue' onclick='btnupd(this);'>修改</button > <button style='border:1px solid blue;color:blue' onclick='btncan(this)'>取消</button>";
        }
        function btncan(obj) {
            var tr = obj.parentNode.parentNode;//拿到按钮所在行
            //拿到行的所有列
            var tds = tr.children;
            //退出编辑模式  还原值
            tds[0].innerHTML = beforeArry[0];
            tds[1].innerHTML = beforeArry[1];
            tds[2].innerHTML = beforeArry[2];
            tds[3].innerHTML = beforeArry[3];
            tds[4].innerHTML = beforeArry[4];
            tds[5].innerHTML = beforeArry[5];
            tds[6].innerHTML = "<button onclick='btnedt(this);' style='border:1px solid blue;color:blue'>编辑</button>"
        }
        function btnupd(obj) {
            var tr = obj.parentNode.parentNode;//拿到按钮所在行
            //拿到行的所有列
            var tds = tr.children;
            var sex = $("input[name='esex']:checked").val();
            var edu = $("#esel option:selected").val();
            var email = $("#eemail").val();
            var hobbys = "";
            $("input[name='hobbys']:checked").each(function (i) {//把所有被选中的复选框的值拼接成字符串
                hobbys += $(this).val() + ",";
            });
            hobbys = hobbys.substring(0, hobbys.lastIndexOf(','));
            //replacewith 替换掉原有td 重新设置
            $(tds[0]).replaceWith("<td>" + tds[0].children[0].value + "</td>");
            $(tds[1]).replaceWith("<td>" + tds[1].children[0].value + "</td>");
            $(tds[2]).replaceWith("<td>" + sex + "</td>");
            $(tds[3]).replaceWith("<td>" + edu + "</td>");
            $(tds[4]).replaceWith("<td>" + email + "</td>");
            $(tds[5]).replaceWith("<td>" + hobbys + "</td>");
            tds[6].innerHTML = "<button onclick='btnedt(this);' style='border:1px solid blue;color:blue'>编辑</button>"//退出编辑模式
        }
    </script>
</head>
<body>
    <div style="width:800px;margin:0px auto;">
        <fieldset style="width:800px;border:1px solid blue;text-align:center">
            <legend>数据编辑区</legend>
                <table width="600" id="tb" style="margin:auto">
                    <tr>
                        <td>登录名:</td>
                        <td><input type="text" id="loginId" /></td>
                        <td>姓名:</td>
                        <td><input type="text" id="userName" /></td>
                    </tr>
                    <tr>
                        <td>性别:</td>
                        <td><input type="radio" name="sex" value="男" checked="checked" />男 <input type="radio" name="sex" value="女" />女 </td>
                        <td>学历:</td>
                        <td>
                            <select id="sel" style="width:180px">
                                <option value="高中" selected="selected">高中</option>
                                <option value="中专">中专</option>
                                <option value="大专">大专</option>
                                <option value="本科">本科</option>
                                <option value="研究生">研究生</option>
                                <option value="硕士">硕士</option>
                                <option value="博士">博士</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>电子邮箱:</td>
                        <td><input type="email" id="email" /></td>
                        <td>爱好:</td>
                        <td><input type='checkbox' value='唱歌' name='hobby' />唱歌<input type='checkbox' value='跳舞' name='hobby' />跳舞<input type='checkbox' value='LOL' name='hobby' />LOL<br /><input type='checkbox' value='DOTA' name='hobby' />DOTA<input type='checkbox' value='游泳' name='hobby' />游泳<input type='checkbox' value='看书' name='hobby' />看书</td>
                    </tr>
                    <tr>
                        <td align="center" colspan="4"><button onclick="btnAdd();" style="background-color:lightgray;border:1px solid gray">添加</button>&nbsp;<button onclick="btnReset();"  style="background-color:lightgray;border:1px solid gray">取消</button>
                    </tr>
                </table>
        </fieldset>
        <table width="830" id="tb2">
            <thead>
                <tr>
                    <th>登录名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>学历</th>
                    <th>电子邮件</th>
                    <th>爱好</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody id="mytb"></tbody>
        </table>
    </div>
</body>
</html>

纵稚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery脱离数据库在前端进行表格增删改查

一个简易的表格增删改查废话不多说上代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta chars...
复制链接

扫一扫