API tools faq
paste
Advertisement
junbjn98

as3

junbjn98
Nov 20th, 2017
483
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 9.61 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>FFSE1702006 - JavaScript Assignment 3</title>
  7.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8.     <style type="text/css">
  9.     span {
  10.         width: 150px;
  11.         margin-left: 20px;
  12.         float: left;
  13.     }
  14.     span.invalid {
  15.         float: none;
  16.         color: #d05028;
  17.     }
  18.     p {
  19.         margin: 5px 0px;
  20.     }
  21.     #option_show button {
  22.         margin-top: 10px;
  23.         padding: 2px 20px;
  24.     }
  25.     #check {
  26.         margin-left: 170px;
  27.     }
  28.     #test {
  29.         margin-left: 25px;
  30.     }
  31.     select {
  32.         width: 150px;
  33.     }
  34.     #title {
  35.         margin-top: 80px;
  36.     }
  37.     table {
  38.         border-collapse: collapse;
  39.         text-align: center;
  40.         margin: 40px 0px;
  41.     }
  42.     table, td {
  43.         padding: 0.2em 0.5em;
  44.         border: 1px solid black;
  45.     }
  46.     tr:first-child {
  47.         background-color: #d6d6d6;
  48.     }
  49.     tr td:nth-child(n+6) {
  50.         width: 78px;
  51.     }
  52.     tr:nth-child(n+2) td:last-child {
  53.         color: red;
  54.     }
  55.     #tinhtb {
  56.         margin-left: 30px;
  57.     }
  58.     #danhgiahs {
  59.         margin-left: 33%;
  60.     }
  61.     </style>
  62. </head>
  63.  
  64. <body>
  65.     <select onchange="form_input()">
  66.         <option selected disabled hidden>Chọn số lượng</option>
  67.         <option>1</option>
  68.         <option>2</option>
  69.         <option>3</option>
  70.         <option>4</option>
  71.     </select>
  72.     <div id="option_show" style="display: none">
  73.         <p id=title><b>Form nhập liệu:</b></p>
  74.         <br>
  75.         <form id=form style="display: none">
  76.             <p><span>Họ tên</span>
  77.                 <input class="name" type="text">
  78.                 <span class="invalid check_name">Họ tên bắt buộc nhập</span>
  79.             </p>
  80.             <p><span>Lớp</span>
  81.                 <input class="classs" type="text">
  82.                 <span class="invalid check_classs">Lớp bắt buộc nhập</span>
  83.             </p>
  84.             <p><span>Email</span>
  85.                 <input class="email" type="text">
  86.                 <span class="invalid check_email">Email phải nhập và nhập đúng định dạng</span>
  87.             </p>
  88.             <p><span>Số điện thoại</span>
  89.                 <input class="phone" type="text">
  90.                 <span class="invalid check_phone">Số điện thoại phải nhập và nhập đúng định dạng (xxx xxx xxxx)</span>
  91.             </p>
  92.             <p><span>Điểm Văn</span>
  93.                 <input class="p1" type="number">
  94.                 <span class="invalid check_p1">Điểm Văn phải nhập và phải là số từ 0 - 10</span>
  95.             </p>
  96.             <p><span>Điểm Đạo Đức</span>
  97.                 <input class="p2" type="number">
  98.                 <span class="invalid check_p2">Điểm Đạo Đức phải nhập và phải là số từ 0 - 10</span>
  99.             </p>
  100.             <p><span>Điểm Lập Trình</span>
  101.                 <input class="p3" type="number">
  102.                 <span class="invalid check_p3">Điểm Lập Trình phải nhập và phải là số từ 0 - 10</span>
  103.             </p>
  104.         </form>
  105.         <div id=show>
  106.         </div>
  107.         <button type="submit" onclick="check()" id="check">Nhập</button>
  108.         <button type="submit" onclick="test()" id="test">Test</button>
  109.     </div>
  110.     <div id="table_show" style="display: none">
  111.         <table>
  112.             <tr>
  113.                 <td>STT</td>
  114.                 <td>Họ Tên</td>
  115.                 <td>Lớp</td>
  116.                 <td>Email</td>
  117.                 <td>SDT</td>
  118.                 <td>Văn</td>
  119.                 <td>Đạo Đức</td>
  120.                 <td>Lập Trình</td>
  121.                 <td>Trung Bình</td>
  122.             </tr>
  123.         </table>
  124.         <button type="submit" onclick="danhgiahs()" id="danhgiahs">Đánh giá HS</button>
  125.         <button type="submit" onclick="tinhtb()" id="tinhtb">Tính TB</button>
  126.     </div>
  127.    
  128.     <script type="text/javascript">
  129.     form_html = $("#form").html();
  130.     i = 0;
  131.     stt_print = 0;
  132.     sv = [];
  133.  
  134.     function form_input() {
  135.         $("#option_show").show();
  136.         text = "";
  137.         for (var i = 1; i <= $("option:selected").text(); i++) {
  138.             if (i === 1) {
  139.                 $("#form").show();
  140.             } else {
  141.                 text += "<hr align='left' width='350px'><form>" + form_html + "</form>";
  142.             }
  143.         }
  144.         $("#show").html(text);
  145.         $(".invalid").hide();
  146.         $("form").each(function() {
  147.             this.reset();
  148.         });
  149.     }
  150.  
  151.     function check_valid() {
  152.         $("form").each(function() {
  153.             // Check name
  154.             name = $(this).find(".name").val();
  155.             if (name === "") {
  156.                 $(this).find(".check_name").show();
  157.             } else {
  158.                 $(this).find(".check_name").hide();
  159.             }
  160.             // Check classs
  161.             classs = $(this).find(".classs").val();
  162.             if (classs === "") {
  163.                 $(this).find(".check_classs").show();
  164.             } else {
  165.                 $(this).find(".check_classs").hide();
  166.             }
  167.             // Check email
  168.             email = $(this).find(".email").val();
  169.             if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
  170.                 $(this).find(".check_email").hide();
  171.             } else {
  172.                 $(this).find(".check_email").show();
  173.             }
  174.             // Check phone
  175.             phone = $(this).find(".phone").val();
  176.             if (/^\d{3} \d{3} \d{4}$/.test(phone)) {
  177.                 $(this).find(".check_phone").hide();
  178.             } else {
  179.                 $(this).find(".check_phone").show();
  180.             }
  181.             // Check p1
  182.             p1 = $(this).find(".p1").val();
  183.             if (isNaN(p1) || p1 < 0 || p1 > 10 || p1 === "") {
  184.                 $(this).find(".check_p1").show();
  185.             } else {
  186.                 $(this).find(".check_p1").hide();
  187.             }
  188.             // Check p2
  189.             p2 = $(this).find(".p2").val();
  190.             if (isNaN(p2) || p2 < 0 || p2 > 10 || p2 === "") {
  191.                 $(this).find(".check_p2").show();
  192.             } else {
  193.                 $(this).find(".check_p2").hide();
  194.             }
  195.             // Check p3
  196.             p3 = $(this).find(".p3").val();
  197.             if (isNaN(p3) || p3 < 0 || p3 > 10 || p3 === "") {
  198.                 $(this).find(".check_p3").show();
  199.             } else {
  200.                 $(this).find(".check_p3").hide();
  201.             }
  202.         });
  203.  
  204.     }
  205.  
  206.     function check() {
  207.         check_valid();
  208.         if ($(".invalid").is(":visible")) {} else {
  209.             $("form").each(function() {
  210.                 name = $(this).find(".name").val();
  211.                 classs = $(this).find(".classs").val();
  212.                 email = $(this).find(".email").val();
  213.                 phone = $(this).find(".phone").val();
  214.                 p1 = $(this).find(".p1").val();
  215.                 p2 = $(this).find(".p2").val();
  216.                 p3 = $(this).find(".p3").val();
  217.                 tb = ((+p1 + +p2 + +p3) / 3).toFixed(1);
  218.                 stt = i + 1;
  219.                 sv[i] = new data(stt, name, classs, email, phone, p1, p2, p3, tb);
  220.                 i++;
  221.                 this.reset();
  222.             });
  223.             table();
  224.         }
  225.     }
  226.  
  227.     function data(stt, name, classs, email, phone, p1, p2, p3, tb) {
  228.         this.stt = stt;
  229.         this.name = name;
  230.         this.classs = classs;
  231.         this.email = email;
  232.         this.phone = phone;
  233.         this.p1 = p1;
  234.         this.p2 = p2;
  235.         this.p3 = p3;
  236.         this.tb = tb;
  237.     }
  238.  
  239.     function table() {
  240.         $("#table_show").show();
  241.         table_html = "";
  242.         for (; stt_print < sv.length; stt_print++) {
  243.             table_html += "<tr>";
  244.             for (x in sv[stt_print]) {
  245.                 table_html += "<td>" + sv[stt_print][x];
  246.             }
  247.         }
  248.         $("table").append(table_html);
  249.         $("tr:nth-child(n+2)").each(function() {
  250.             $(this).find("td:last-child").html("?");
  251.         });
  252.     }
  253.  
  254.     function tinhtb() {
  255.         var i = 0;
  256.         $("tr:nth-child(n+2)").each(function() {
  257.             $(this).find("td:last-child").html(sv[i].tb);
  258.             i++;
  259.         });
  260.     }
  261.  
  262.     function danhgiahs() {
  263.         $("tr td:nth-child(n+6)").each(function() {
  264.             if ($(this).text() >= 8) {
  265.                 $(this).css({ "color": "red", "font-weight": "bold" });
  266.             } else {
  267.                 if ($(this).text() <= 4) {
  268.                     $(this).css({ "color": "blue", "font-weight": "bold" });
  269.                 }
  270.             }
  271.         });
  272.         $("tr:nth-child(n+2) td:last-child").css({ "color": "red", "font-weight": "normal" });
  273.     }
  274.  
  275.     function test() {
  276.         sv_test = [];
  277.         sv_test[0] = new data("", "Hoàng", "Fun_123", "[email protected]", "098 888 8888", 10, 9, 10, "?");
  278.         sv_test[1] = new data("", "Thanh", "Fun_123", "[email protected]", "097 777 8888", 5, 4, 8, "?");
  279.         sv_test[2] = new data("", "Hà", "Fun_123", "[email protected]", "091 000 8888", 4, 4, 10, "?");
  280.         var i = 0;
  281.         $("form").each(function() {
  282.             $(this).find(".name").val(sv_test[i].name);
  283.             $(this).find(".classs").val(sv_test[i].classs);
  284.             $(this).find(".email").val(sv_test[i].email);
  285.             $(this).find(".phone").val(sv_test[i].phone);
  286.             $(this).find(".p1").val(sv_test[i].p1);
  287.             $(this).find(".p2").val(sv_test[i].p2);
  288.             $(this).find(".p3").val(sv_test[i].p3);
  289.             i++;
  290.         });
  291.     }
  292.     </script>
  293. </body>
  294.  
  295. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!