使用JQuery动态创建表格

知识点:
使用jq中html()创建元素,append()添加节点,remove()删除节点,类方法:addClass()和removeClass()方法等


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            padding: 0;
            margin:0;
        }
        input {
            width:100px;
            height:30px;
            /*cursor: pointer;*/
            /*font:700 14px/30px "simsun";*/
            border-radius: 5px;
        }
        table {
            border-collapse: collapse;
            margin: 10px 0;
        }
        table tr {
            border: 1px solid #ddd;
        }
        table td,table th {
            padding:5px;
            text-align: center;
        }
        table th{
            background-color: #8af6ff;
        }
        .mask-color {
            background-color: rgba(0,0,0,0.4);
        }
        #mask{
            width: 300px;
            height: 250px;
            box-shadow: 2px 2px 2px 2px #ccc;
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -150px;
            margin-top: -125px;
        }
        #mask h2 {
            color: #c30230;
            font-weight: 700;
            background-color: #ddd;
            height:20px;
            line-height: 20px;
            font-size: 16px;
        }
        #mask input {
            margin: 10px 0;
        }
    style>
head>
<body>
    <div id="wrapper">
        <input type="button" value="添加数据">
        <table>
            <thead>
                <tr>
                    <th>课程名称th>
                    <th>所属学院th>
                    <th>已学会th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>JAVASCRIPTtd>
                    <td>前端移动开发学院td>
                    <td class="get">GETtd>
                tr>
                <tr>
                    <td>HTML5td>
                    <td>前端移动开发学院td>
                    <td class="get">GETtd>
                tr>
                <tr>
                    <td>CSS3td>
                    <td>前端移动开发学院td>
                    <td class="get">GETtd>
                tr>
                <tr>
                    <td>BOOTSTRAPtd>
                    <td>前端移动开发学院td>
                    <td class="get">GETtd>
                tr>
            tbody>
        table>
    div>
    <div id="mask" style="display: none">
        <h2>添加数据 <span style="float: right;margin-right:10px;display: inline-block;width: 10px;height: 20px">Xspan>h2>

        <div>
            <span>课程名称:span> <input id="name" type="text" placeholder="请输入课程名称!" style="width: 150px;height: 30px;">
        div>
        <div>
            <span>所属学院:span> <input id="school" type="text" value="JAVA学院" style="width: 150px;height: 30px;">
        div>
        <div style="text-align: center">
            <button style="width: 150px;height: 25px;text-align: center;line-height: 25px;border: 0;">添加button>
        div>
    div>
body>
<script src="jquery-1.11.1.js">script>
<script>
    $("input[type='button']").click(function(){
        $("#mask").fadeIn(1000);
        $("body").addClass("mask-color");
    });
    $("h2 span").click(function(){
        $("#mask").fadeOut(1000);
        $("body").removeClass("mask-color");
    });

    $("#mask button").click(function(){
        var name = $("#name").val();
        var school = $("#school").val();
        if(name == "" || name == null){
            alert("请输入课程名称!");
            return;
        }
        $("#mask").fadeOut();
        $("body").removeClass("mask-color");
        var tr = $("");
        //赋值
        tr.html(''+name+''+school+'GET');
        //在房间tbody中
        $("tbody").append(tr);

        //BUG:新产生的tr没有事件绑定 坑!!
        tr.click(function(){
            $(this).remove();
        })
        $("#name").val("");
    });

    $(".get").click(function(){
//        alert(0);
        $(this).parent("tr").remove();
    })
script>
html>

你可能感兴趣的:(使用JQuery动态创建表格)