jquery写表格的增删改查

最新推荐文章于 2023-12-24 18:00:00 发布
旭陌小生
最新推荐文章于 2023-12-24 18:00:00 发布
阅读量889
点赞数 1
分类专栏：前端文章标签： jquery
本文链接：https://blog.csdn.net/qq_37953045/article/details/102816432
版权
前端专栏收录该内容
40 篇文章
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.min.js" language="JavaScript" type="text/javascript"></script>
    <script>

        //禁用f12
        document.onkeydown = function () {
            if (window.event && window.event.keyCode == 123) {
                event.keyCode = 0;
                event.returnValue = false;
            }
            if (window.event && window.event.keyCode == 13) {
                window.event.keyCode = 505;
            }
            if (window.event && window.event.keyCode == 8) {
                alert(str + "\n请使用Del键进行字符的删除操作！");
                window.event.returnValue = false;
            }
        }
        //禁止鼠标右键点击查看源码
        document.oncontextmenu = function (event) {
            if (window.event) {
                event = window.event;
            }
            try {
                var the = event.srcElement;
                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                    return false;
                }
                return true;
            } catch (e) {
                return false;
            }
        }
        //table背景色
        window.onload=function () {
            fn();
        }
        function fn() {
            var trs = $("#tb > tr");
            for (var i=0;i<trs.length;i++){
                if(i%2 == 0){
                    trs[i].style.backgroundColor="red"
                }else {
                    trs[i].style.backgroundColor="green";
                }
            }
        }
        //添加行
        function addRow() {
            //正则表达式
            var nameReg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
            var sexReg = /^(男|女)$/;
            var ageReg = /^([1-9][0-9]?|1[0-4][0-9]|150)$/;
            var proReg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
            var scorReg = /^(?:[1-9]?\d|150)$/;
            // --------------
            var tb = $("#tb");
            var name = $("#name");
                if(!nameReg.test(name.val())){
                alert("用户名格式不正确");
                return false;
            }
             var sex = $("#sex").val();
             if(!sexReg.test(sex)){
                 alert("性别只能是男或女");
                 return false;
                }
             var age = $("#age").val();
             if(!ageReg.test(age)){
                 alert("年龄是能是1-150的正整数");
                 return false;
             }
             var pro = $("#pro").val();
             if(!proReg.test(pro)){
                 alert("科目只能输入汉字和英文")
                 return false;
             }
             var scor = $("#scor").val();
             if(!scorReg.test(scor)){
                 alert("成绩只能是0-150之间的数字");
                 return false;
             }

            var tr_1 = $("<tr>");
            var td_1 = $("<td>").text(name),
                td_2 = $("<td>").text(sex),
                td_3= $("<td>").text(age),
                td_4= $("<td>").text(pro),
                td_5 = $("<td>").text(scor),
                td_6 = $("<td>");
            var inputs = $("<input>").attr("type","checkbox").attr("class","cz");
            td_6.append(inputs);
            tr_1.append(td_1).append(td_2).append(td_3).append(td_4).append(td_5).append(td_6);
            tb.append(tr_1);
        }
        //删除行
        function delRow() {
            var i=0;
            var czs = $(".cz");
                for (i=0; i < czs.length; i++) {
                    if (czs[i].checked) {
                        $(czs[i]).parent().parent().remove();
                    }
                }
            }
        //查找行
        function selectRow() {
           var trs = $("#tb > tr");
           var sname = $("#sname").val();
           for (var i=0;i<trs.length;i++){
               var tds = $(trs[i]).children().first();
               for (var j=0;j<tds.length;j++){
                   // alert($(tds[j]).text())
                   if($(tds[j]).text() == sname){
                       alert($(tds[j]).parent().text());
                   }
               }
           }
        }
        //修改行
        function upRow() {
            var trs = $("#tb > tr");
            var upText = $("#upText").val();
            for (var i=1;i<=trs.length;i++){
                if (i == upText){
                    // alert($(trs[i-1]).children().eq(0).text("w"));
                    var ctr = $(trs[i-1]).children();
                    ctr.eq(0).text("汪洋");
                    ctr.eq(1).text("女");
                    ctr.eq(2).text("16");
                    ctr.eq(3).text("数学");
                    ctr.eq(4).text("145");
                    // alert($(trs[i-1]).html("" +

                    //     "<td>汪洋</td>" +
                    //     "<td>男</td>" +
                    //     "<td>20</td>" +
                    //     "<td>语文</td>" +
                    //     "<td>100</td>"))
                }
            }
        }
    </script>
</head>
<body>
    <div style="width: 200px;margin: 10px auto">
        <input type="text" placeholder="请输入姓名" id="name"><br>
        <input type="text" placeholder="请输入性别" id="sex"><br>
        <input type="text" placeholder="请输入年龄" id="age"><br>
        <input type="text" placeholder="请输入科目" id="pro"><br>
        <input type="text" placeholder="请输入成绩" id="scor"><br>
    </div>
    <table border="1" cellpadding="10" align="center">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody align="center" id="tb">
            <tr>
                <td>汪旭颖</td>
                <td>男</td>
                <td>24</td>
                <td>java</td>
                <td>100</td>
                <td><input type="checkbox" class="cz"></td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>24</td>
                <td>java</td>
                <td>100</td>
                <td><input type="checkbox" class="cz"></td>
            </tr>
            <tr>
                <td>汪旭维</td>
                <td>男</td>
                <td>22</td>
                <td>javaWeb</td>
                <td>80</td>
                <td><input type="checkbox" class="cz"></td>
            </tr>
            <tr>
                <td>郭小雨</td>
                <td>女</td>
                <td>22</td>
                <td>javaScript</td>
                <td>90</td>
                <td><input type="checkbox" class="cz"></td>
            </tr>
        </tbody>
    </table>
    <div style="margin:20px auto;width: 650px">
        <button onclick="addRow()">添加行</button>
        <button onclick="delRow()">删除行</button>
        <button onclick="selectRow()">查找行</button>
        <input type="text" placeholder="请输入要查找的姓名" id="sname">
        <button onclick="upRow()">修改行</button>
        <input type="text" placeholder="请输入要修改的行数" id="upText">
    </div>
</body>
</html>
增删改查每一个都写了正则判断