JavaScript：建立表格動態插入資料

阿新 • • 發佈：2020-12-10

技術標籤：Java高階開發作業 html css js javascript web

使用JavaScript動態插入表格和資料

一、建立HTML並佈置好基本格局

這裡沒有什麼難點，基本HTML知識
為了簡單實現沒有使用thead和tbody進行設計

<html>
<head>
<meta charset="UTF-8">
<title>學生資訊表</title> 
<style>

</style>
<script>

</script>
</head>
<body 
>
    <div>
        <table>
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>學號</td>
            </tr>
        </table>
    </div>
</body>
</html>

二、設定表格CSS

width是寬度，100%表示佔據網頁整個寬度

border是table邊框
border-style是邊框樣式，dotted表示虛線，solid表示實線

<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
</style>

三、編寫JavaScript指令碼

1.首先在HTML中插入button，點選按鈕時進行新增表格

<button onclick 
="new();">新增</button>

2.接著，編寫new()函式體

innerHTML是插入HTML元素，這裡其實插入的是文字，也可以插入其餘元素，例如document.innerHTML = “標題”

<script>
    function add(){
        // 獲取table標籤元素
        let table = document.getElementById("work_table");
        // 建立新行
        let newRow = table.insertRow();
        // 建立三個新單元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "張三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>

3.執行效果
在這裡插入圖片描述

四、根據我上篇文章，實現彈出視窗輸入文字然後插入表格

上篇文章連結 link.

1.實現彈出視窗，這裡和上篇一樣，不詳細說明

<html>
<head>
<meta charset="UTF-8">
<title>學生資訊表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 關閉按鈕樣式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 彈出介面的關閉按鈕 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 獲取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制兩個div的顯示與隱藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 獲取彈出視窗元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 獲取table標籤元素
        let table = document.getElementById("work_table");
        // 建立新行
        let newRow = table.insertRow();
        // 建立三個新單元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 向表格中插入元素
        cellName.innerHTML = "張三";
        cellAge.innerHTML = "男";
        cellID.innerHTML = "1";
    }
</script>
</head>
<body>
    <button onclick="popDiv();">彈窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>學號</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">關閉</a>
        </div>
            <p>此處為彈出視窗</p>
    </div>
</body>
</html>

2.給彈出視窗設定三個文字框用於輸入

<div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">關閉</a>
        </div>
        <div>
            請輸入<br/><br/>
            <form
                <label>姓名(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="NAME"><br/>

                <label>年齡(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="AGE"><br/>

                <label>工人性別(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
        </div>
    </div>

3.現在只需要修改add()函式就可以，也就是獲取文字框的內容

這裡相比於之前的add()函式只是新增了獲取文字框的內容，獲取文字框和獲取table是一樣的方法，通過id獲取，也可以通過name和class獲取
可以通過console.log(typeof(name.value));獲取變數的型別，在瀏覽器中檢視，F12開啟console控制檯

	function add(){
        // 獲取table標籤元素
        let table = document.getElementById("work_table");
        // 建立新行
        let newRow = table.insertRow();
        // 建立三個新單元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 獲取文字框內容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let age = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = name.value;
        cellID.innerHTML = name.value;
        console.log(typeof(name.value));

        closePop();
    }

五、總程式碼

<html>
<head>
<meta charset="UTF-8">
<title>學生資訊表</title> 
<style>
    table{
        width: 100%;
        border: 1px;
        border-style: solid;
    }
    table td{
        border: 0.5px;
        border-style: solid;
    }
    body{
        background-color: cyan;
    }
    #popDiv{
        display: none;
        background-color: whitesmoke;
        z-index: 11;
        width: 600px;
        height: 600px;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
    /* 關閉按鈕樣式 */
    #popDiv .close a {
        text-decoration: none;
        color: whitesmoke;
    }
    /* 彈出介面的關閉按鈕 */
    #popDiv .close{
        text-align: right;
        margin-right: 5px;
        background-color:#2D2C3B;
    }
    #popDiv p{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<script>
    function popDiv(){
            // 獲取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制兩個div的顯示與隱藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
    }

    function closePop(){
        // 獲取彈出視窗元素
        let popDiv = document.getElementById("popDiv");

        popDiv.style.display = "none";
    }

    function add(){
        // 獲取table標籤元素
        let table = document.getElementById("work_table");
        // 建立新行
        let newRow = table.insertRow();
        // 建立三個新單元格
        let cellName = newRow.insertCell();
        let cellAge = newRow.insertCell();
        let cellID = newRow.insertCell();
        // 獲取文字框內容
        let name = document.getElementById("NAME");
        let sex = document.getElementById("SEX");
        let age = document.getElementById("AGE");
        // 向表格中插入元素
        cellName.innerHTML = name.value;
        cellAge.innerHTML = name.value;
        cellID.innerHTML = name.value;

        closePop();
    }
</script>
</head>
<body>
    <button onclick="popDiv();">彈窗</button>
    <div id="popLayer">
        <table id="work_table">
            <tr>
                <td>姓名</td>
                <td>年齡</td>
                <td>學號</td>
            </tr>
        </table>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">關閉</a>
        </div>
        <div>
            請輸入<br/><br/>
            <form
                <label>姓名(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="NAME"><br/>

                <label>年齡(*)</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" id="AGE"><br/>

                <label>工人性別(*)</label>
                <input type="text" id="SEX"><br/>
            </form>
            <button onclick="add();">√儲存</button>
        </div>
    </div>
</body>
</html>

JavaScript：建立表格動態插入資料

技術標籤：Java高階開發作業htmlcssjsjavascriptweb 使用JavaScript動態插入表格和資料

postgreSQL筆記-建立資料庫，建立表格，插入、更改與刪除資料

技術標籤：sqlsql 文章目錄建立資料庫：``CREATE DATABASE``建立資料表：``CREATE TABLE``資料型別

python的mysql資料庫建立表與插入資料操作示例

本文例項講述了python的mysql資料庫建立表與插入資料操作。分享給大家供大家參考，具體如下：

.net core 如何向elasticsearch中建立索引，插入資料。

首先我們要建一個webapi工程，然後下載兩個外掛： 1，Nest2，Elasticsearch.Net 下載後，下面就上程式碼了，首先是elasticsearchHelp幫助類

Element UI使用表格動態渲染資料

json資料多層巢狀如何實現渲染例如：我們表頭需要第一層的datetime和data下面的屬性

JS如何操作DOM基於表格動態展示資料

公司做一個實時監控有一個地方需要把後臺推送的資料動態的使用表格進行展示

根據模板PDF動態插入資料(合同等)

準備工作： Adobe Acrobat DC PDF編輯器準備一個PDF檔案 1，編輯PDF，點選左上角得下拉框，選擇準備表單

hive動態插入資料SemanticException [Error 10096]:

技術標籤：報錯hive 報錯資訊： hive動態插入資料SemanticException [Error 10096]: FAILED: SemanticException [Error 10096]: Dynamic partition strict mode requires at least one static partition column.