成绩查询匹配

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <label>考号</label>
    <p>
        <input type="text" id="kh1">
        <input type="button" value="查询">
    </p>
    <p>
        <br/>
    </p>
    <table width="200" border="1">
        <tr>
            <td>状况</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td id="zk1">&nbsp;</td>
            <td id="cj1">&nbsp;</td>
        </tr>
    </table>
    <p>&nbsp;</p>
    <div id="data">
        <label>001</label>
        <label>92</label>
        <br>
        <label>002</label>
        <label>56</label>
        <br>
        <label>003</label>
        <label>63</label>
        <br>
        <label>004</label>
        <label>87</label>
        <br>
        <label>005</label>
        <label>65</label>
        <br>
        <label>006</label>
        <label>57</label>
        <br>
        <label>007</label>
        <label>89</label>
        <br>
        <label>008</label>
        <label>48</label>
        <br>
        <label>009</label>
        <label>77</label>
        <br>
        <label>010</label>
        <label>66</label>
        <br>
    </div>
    <script src="./jquery-1.12.4.min.js"></script>
    <script>
        window.onload = function () {
            // $("input[value=查询]").click(function () {
            //     let num = $(`label:contains(${$("#kh1").val()})`).next().text()
            //     $("#cj1").text(num);//添加成绩
            //     if (num < 60) {//比较
            //         $("#zk1").text("不及格");
            //     } else if (num < 70) {
            //         $("#zk1").text("及格");
            //     } else if (num < 80) {
            //         $("#zk1").text("中等");
            //     } else if (num < 90) {
            //         $("#zk1").text("良好");
            //     } else {
            //         $("#zk1").text("优秀");
            //     }
            // })
            //方法二
            $("input[value=查询]").click(function () {
                let value = $("#kh1").val();
                let reg = /^00?\d{1}0?$/;
                let score = $("label:contains(" + value + ")").next().text();
                let level = "";
                switch (parseInt(score / 10)) {
                    case 9:
                        level = "优秀";
                        break;
                    case 8:
                        level = "良好";
                        break;
                    case 7:
                        level = "中等";
                        break;
                    case 6:
                        level = "及格";
                        break;
                    default:
                        level = "不及格"
                        break;
                }
                if (!reg.test(value)) {
                    $("#zk1").text("查无此人");
                    $("#cj1").text(""); 
                } else {
                    $("#cj1").text(score); //添加成绩
                    $("#zk1").text(level); //添加等级
                }


            })
        }
    </script>
</body>

</html>

猜你喜欢

转载自www.cnblogs.com/cj-18/p/9206870.html