使用JQuery動態建立表格

阿新 • • 發佈：2019-01-03

知識點：
使用jq中html()建立元素，append()新增節點，remove()刪除節點，類方法：addClass()和removeClass()方法等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>JAVASCRIPT</td>
                    <td>前端移動開發學院</td>
                    <td class="get">GET</td>
                </tr>
                <tr>
                    <td>HTML5</td>
                    <td>前端移動開發學院</td>
                    <td class="get">GET</td>
                </tr>
                <tr>
                    <td>CSS3</td>
                    <td>前端移動開發學院</td>
                    <td class="get">GET</td>
                </tr>
                <tr>
                    <td>BOOTSTRAP</td>
                    <td>前端移動開發學院</td>
                    <td class="get">GET</td>
                </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">X</span></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></tr>");
        //賦值
        tr.html('<td>'+name+'</td><td>'+school+'</td><td class="get">GET</td>');
        //在房間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動態建立表格

知識點：使用jq中html()建立元素，append()新增節點，remove()刪除節點，類方法：addClass()和removeClass()方法等 <!DOCTYPE html>

jq動態建立表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

案例動態建立表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input

jquery 動態建立input，value有空格取值不全問題

Jquery動態建立input的元素設定value屬性時，要多加一組單引號。原因：不加一組單引號引起的問題是，當Name有空格時，value只顯示Name的部分。 $input= $("<input type='text' ;value='" +Name+ "'>&

前端動態建立表格並獲取表格的所有內容為陣列

var arr=[]; //添加藥品 $("#btn1").click(function (){ if($("#name").val()=="" ||$("#num").val()=="" || $("#spec").val()=="

JavaScript動態建立表格

請輸入行數： <input type="text" value="3" id="rows"> <br> 請輸入列數： <input type="text" value="4" id="cols"> <br>

js 動態建立表格

我們利用JS操作DOM的能力，動態建立一張表格，可以動態增加行，刪除行，複選框有全選的功能！有以下3個檔案： 1. dom.css .tbl { font-size: 12px; border: 1px solid #ebebee; }

jQuery動態建立表單並提交

$("button").click(function(){ action = "http://www.baidu.com"; form = $("<form></form>") form.attr('a

js原生動態建立表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

AJAX動態建立表格例項

[size=medium]初學AJAX,把一些學習的點滴記錄下來!以備以後參考[/size]<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="utf

JQuery 動態建立表單，並自動提交

前言：寫這個是為了實現使用cookie進行自動登入的功能，下面的程式碼是一個元素一個元素進行建立和賦值的， (可以嘗試下將所有的html程式碼(form、input）全部拼好以後放到${ } 中，再進行提交。) submit的時候注意下寫法，就這樣 //獲取cookie中的

jquery動態建立form表單

function exportExcel() { var merchantName = $('#merchantName').val(); var merchantNo = $('#merchantNo').val(); va

通過js為html動態建立表格

$(function () {$.ajax({type: "POST", url: "../sys/sysMessage/messageList", data: "", success: function(r){ initList(r); }}

FineUIMvc隨筆（1）動態建立表格列

宣告：FineUIMvc（基礎版）是免費軟體，本系列文章適用於基礎版。《FineUIMvc隨筆》目錄 ... 使用者需求使用者希望實現動態建立表格列，在 WebForms 中，我們通過在 Page_Init 中建立列來實現：但

解決Jquery動態給表格賦值時空格後面的內容不顯示的問題

如果從資料庫讀取的資料為A001 002 003，由於沒有給資料加引號，並且會自動給A001加引號，結果就變成了 "A001" 002 003，所以我們在前端看到的資料只有A001 <input value="+data[i]['FName']+" /> 現

動態建立表格;驗證資料,全選和反選,批量刪除

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <

jquery 動態建立 DIV

方法一： var creatediv= function(){ var parentdiv=$('<div></div>'); //建立一個父div parentdiv.attr('id','parent');

使用Javascript動態建立表格，不同的方法，巨大的執行時間差異！

本來是想測試一下使用Javascript生成一個比較大的表格，大概需要多長時間，一直認為這會是一個比較固定的時間。期間用了幾種不同的方法，發現效率相差太大了。下面是測試的具體說明：目標：生成一個2000*5的表格，每個單元格的內容是行號+逗號+列號方法一：使用cre

for迴圈動態建立表格

jQuery動態新增表格資料的基本使用（全選-批量刪除）程式碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/jquery-3.2

使用JQuery動態建立表格

相關推薦