前台技术学习7（1）

今天首先使用jQuery进行了两个练习

一、从左到右，从右到左

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从左到右，从右到左title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    <style>
        div{
            width: 130px;
            height: 140px;
            text-align: center;
        }
    style>
head>
<body>
<div id="left">
    <select multiple="multiple" name="sel01">
        <option value="opt1">选项一option>
        <option value="opt2">选项二option>
        <option value="opt3">选项三option>
        <option value="opt4">选项四option>
        <option value="opt5">选项五option>
        <option value="opt6">选项六option>
    select>
    <button>选中添加至下边button>
    <button>全部添加至下边button>
div>
<div id="right">
    <select multiple="multiple" name="sel02">select>
    <button>选中删除至上边button>
    <button>全部删除至上边button>
div>


<script>
    $(function () {
        //选中添加至下边
        $("button:eq(0)").click(function () {
            $("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"));
        });
        //全部添加至下边
        $("button:eq(1)").click(function () {
            $("select:eq(0) option").appendTo($("select[name='sel02']"));
        });
        //选中删除至上边
        $("button:eq(2)").click(function () {
            $("select[name='sel02'] option:selected").prependTo($("select[name='sel01']"));
        });
        //全部删除至上边
        $("button:eq(3)").click(function () {
            $("select:eq(1) option").prependTo($("select[name='sel01']"));
        });
    })
script>
body>
html>

二、动态表格，之前的动态表格使用DOM对象实现，这次使用jQuery，容易理解

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
    <style>
        #employ{
            border: 1px solid black;
            width: 400px;
            height: 100px;
        }
        #formdiv{
            border: 1px solid yellow;
            width: 400px;
            height: 240px;
            margin-top: 25px;
        }
    style>
head>
<body>

<table id="employ" border="1">
    <tr>
        <th>姓名th>
        <th>邮箱th>
        <th>薪资th>
        <th>操作th>
    tr>
    <tr>
        <td>12td>
        <td>3456@163.comtd>
        <td>5000td>
        <td><a href="delete?id=001">删除a>td>
    tr>
table>

<div id="formdiv">
    <h4>添加新员工h4>
    <table>
        <tr>
            <td class="word">姓名：td>
            <td class="inp"><input type="text" name="enname" id="enname">td>
        tr>
        <tr>
            <td class="word">邮箱：td>
            <td class="inp"><input type="text" name="email" id="email">td>
        tr>
        <tr>
            <td class="word">薪资：td>
            <td class="inp"><input type="text" name="salary" id="salary">td>
        tr>
        <tr>
            <td colspan="2" align="center">
                <button id="add1" value="添加">添加button>
            td>
        tr>
    table>
div>

<script>
    $(function () {
        //删除部分代码包装函数
        var deletefun = function () {
            var obj = $(this).parent().parent();
            var anme = obj.find("a").text();
            if(confirm("确定删除"+name+"吗？")){
                obj.remove();
            }
            return false
        }

        //添加
        $("#add1").click(function () {
            //获取姓名、邮箱、薪资
            var name = $("#enname").val();
            var email = $("#email").val();
            var salary = $("#salary").val();
            var obj = $("" +
                "        "+name+"" +
                "        "+email+"" +
                "        "+salary+"" +
                "        删除" +
                "    ");
            obj.appendTo($("#employ"));
            //给新数据补加绑定
            obj.find("a").click(deletefun);
        });
        //删除
        $("a").click(deletefun); //不使用deletefun()，防止函数自动执行
    })
script>
body>
html>

前台技术学习7（1）

相关

标签