js原生動態建立表格

阿新 • • 發佈：2018-12-28

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{
            border 
-collapse: collapse;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
    <!-- <table>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a href="jvascript:;"></a>
                </td>
            </tr>
        </tbody>
    </table>
     -->
    <script>
        var 
 datas=[
            { name: 'zs', sex: "男", subject: '語文', score: 90 },
            { name: 'ls', sex: "男", subject: '數學', score: 80 },
            { name: 'ww', sex: "女", subject: '英語', score: 60 },
            { name: 'zl', sex: "女", subject: '英語', score: 100 },
            { name: 'xs', sex: "女", subject: '英語', score: 60 },
            { name:  
'dc', sex: "女", subject: '英語', score: 70 }
        ]
        var headDatas = ['姓名', '性別', '科目', '成績', '操作'];
        var box=document.getElementById("box");
        var table=document.createElement("table");
         /* 將建立的table新增到box裡面去 */
        box.appendChild(table);
        table.width="400px";
        table.border="1px";
        /* 動態建立thead */
        var thead=document.createElement("thead");
        table.appendChild(thead);
        thead.style.height="20px";
        thead.style.backgroundColor="purple";
        /* 動態建立th */
        var tr=document.createElement("tr");
        thead.appendChild(tr);
        /* 迴圈遍歷tr */
        for(var i=0;i<headDatas.length;i++){
            var th=document.createElement("th");
            tr.appendChild(th);
            th.innerText=headDatas[i];
         }
         /* 建立tbody */
         var tbody=document.createElement("tbody");
         tbody.style.textAlign="center";
         table.appendChild(tbody);
         /* 迴圈遍歷datas內容 */
         for(var i=0;i<datas.length;i++){
             var data=datas[i];
            var tr=document.createElement("tr");
            tbody.appendChild(tr);
            /* 遍歷data */
            for(var key in data){
                var td=document.createElement("td");
                tr.appendChild(td);
                td.innerText=data[key];
            }
            /* 新增a標籤 刪除 */
            var a=document.createElement("a");
            var th=document.createElement("th");
            th.appendChild(a);
            tr.appendChild(th);
            a.innerText="刪除";
            a.href="javascript:;";
            a.onclick=function(e){
                var name=prompt("我這麼可愛，真的要刪除我嗎？輸入yes我就消失啦");
                if(name=="yes"){
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }   

         }
       

       
        
    </script>
</body>
</html>

js原生動態建立表格

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

js 動態建立表格

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

通過js為html動態建立表格

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

js實現動態刪除表格的行或者列-------Day57

back _id ron easy 技術註意次循環 ont 時序昨天記錄了動態加入表格的一行，當然這個一行是指一行數據，也就是說一行多少列也是加上的，而且第幾列的內容都能夠加入上，先來回想下它的實現的關鍵點： 1、var row=table.i

JS實現動態生成表格並提交表格數據向後端表格中數據轉為json

入參 blank wid 行編輯變量 ava 思路動態 color 原文地址需求：在web頁面上動態的生成表格，並可以對表格中的數據進行編輯，然後把表格中的數據提交至後端服務器保存。首先動態生成表格。 1.首先我們需要導入JS庫文件。jQuery 2.然後在頁面di

jq動態建立表格

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

js如何動態新增表格行

一、總結方法一：新增可通過在table的innerHTML屬性中新增tr和td來實現方法二：通過table的屬性insertRow()，deleteRow()來實現方法一和方法二對比：二、js如何實現動態的在表格中新增和刪除行？

案例動態建立表格

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

js···DOM2動態建立節點

1.生成節點的方法 document.createElement(“div”) 2.插入節點的方法父元素.appendChild(新節點) 在父節點中的子節點後面插入新的節點 3.在指定的位置插入新的節點 (1) 父元素.insertBefore(新節點

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

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前端動態新增表格--包括合併指定單元格

var newRow = "";//全域性變數 var pubSum=1;//計數新增記錄次數 var panelTitle=$("#title").val(); var currExtBJ=""; var existMatterPrice=$("#matter_price

AJAX動態建立表格例項

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

使用JQuery動態建立表格

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

JS實現動態生成表格並提交表格資料向後端

本文例項介紹了JS實現動態生成表格並向後端提交表格資料的相關程式碼，分享給大家供大家參考，具體內容如下先來看一下需求：在web頁面上動態的生成表格，並可以對錶格中的資料進行編輯，然後把表格中的資料提交至後端伺服器儲存。那麼我們首先需要解決的是動態生成表格的問題

js如何動態新增表格

<html> <head> <title>Add table</title> <meta http-equiv="Content-Type" content="text/html; c

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

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

【js】動態合併表格

//動態合併表格 //傳入引數：tableObj(表格ID); //childNodeIndexs:需要合併的列索引可傳多列索引用逗號分割如：（‘0，1，2’表示合併表格的一二三列資料，注意傳入索引時必須按照從前往後的順序） function setRowSpan(ta

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

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

js中動態生成表格

js原生動態建立表格

相關推薦