純JavaScript寫一個對錶格的簡單增刪改查操作

阿新 • • 發佈：2018-11-21

功能: 新增表格資料，修改表格資料，刪除表格資料。

不完善區: 刪除資料之後序號沒有做處理，表單驗證簡單的提示警告，沒有文字提醒。

介面:

線上檢視

下面是程式碼:

<!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>js</title>
<style>
* {
padding: 0px;
margin: 0px;
}
button {
display: inline-block;
padding: 8px 20px;
background-color: rgb(91, 91, 214);
color: #fff;
border: 0px;
border-radius: 5px;

border: 1px solid rgb(149, 149, 236);
outline: none;
cursor: pointer;
}
button:active {
background-color: rgb(69, 69, 163);
}
.content {
width: 1200px;
margin: 0 auto;
}
.btnGroup {
margin-top: 20px;
}
.content .mytb {

text-align: center;
}
.tableArea {
padding-top: 40px;
}
.mytb {
width: 100%;
border: 1px solid #cccccc;
border-collapse: collapse;
}
.mytb thead tr {
background-color: #666;
line-height: 32px;
color: #fff;
}
.mytb tbody {
font-size: 14px;
font-weight: lighter;
color: #333;
}
.mytb tbody tr:nth-of-type(even) {
background-color: #f1f1f1;
line-height: 30px;
}
.mytb tbody tr:nth-of-type(odd) {
background-color: #e0e0e0;
line-height: 30px;
}
.mytb tbody tr:nth-of-type(even):hover {
background-color: #d1d1d1;
cursor: pointer;
}
.mytb tbody tr:nth-of-type(odd):hover {
background-color: #c5c3c3;
cursor: pointer;
}
.mymodel {
width: 380px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
border: 8px solid #666;
position: relative;
z-index: 999;
display: none;
}
.mymodel .item {
margin-bottom: 20px;
line-height: 30px;
}
.mymodel .item input,
.mymodel .item select {
height: 26px;
padding-left: 10px;
}
.mymodel .item input {
width: 260px;
}
.mymodel .item select {
width: 160px;
}
.closeIcon {
position: absolute;
right: 8px;
top: 5px;
display: inline-block;
width: 22px;
height: 22px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
text-align: center;
border-radius: 100px;
background-color: white;
border: 2px solid #9c1b1b;
color: #bb2020;
background-color: rgb(243, 168, 168);
}
.closeIcon:hover {
background-color: rgb(240, 114, 114);
cursor: pointer;
}
.mask {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
background-color: #3e3e40;
opacity: .7;
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="tableArea">
<table class="mytb" border="1">
<thead>
<tr>
<th>
<input onclick="selectAll()" id="checkAll" type="checkbox">
</th>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>班級</th>
</tr>
</thead>
<tbody id="myTb">
<tr>
<td>
<input type="checkbox" class="subCheck">
</td>
<td>1</td>
<td>哈哈</td>
<td>15</td>
<td>二班</td>
</tr>
<tr>
<td>
<input type="checkbox" class="subCheck">
</td>
<td>2</td>
<td>小強</td>
<td>15</td>
<td>一班</td>
</tr>
<tr>
<td>
<input type="checkbox" class="subCheck">
</td>
<td>3</td>
<td>小紅</td>
<td>15</td>
<td>三班</td>
</tr>
</tbody>
</table>
<div class="btnGroup">
<button onclick="showModel()">新增</button>
<button onclick="edit()">修改</button>
<button onclick="del()">刪除</button>
</div>
</div>
</div>
<div class="mymodel" id="mymodel">
<p>
<span onclick="closeModel()" class="closeIcon">X</span>
</p>
<form id="myForm" action="">
<div class="item">
<label for="name">姓名:</label>
<input id="name" name="name" type="text" placeholder="請輸入姓名">
</div>
<div class="item">
<label for="age">年齡:</label>
<input id="age" name="age" type="number" placeholder="請輸入年齡">
</div>
<div class="item">
<label for="userclass">班級:</label>
<select name="userclass" id="userclass">
<option disabled selected value="">請選擇班級</option>
<option value="一班">一班</option>
<option value="二班">二班</option>
<option value="三班">三班</option>
<option value="四班">四班</option>
</select>
</div>
<input type="hidden" id="vv" vv="">
</form>
<button id="saveBtn" onclick="save()">提交</button>
<button onclick="closeModel()">取消</button>
</div>
<div class="mask" id="mask"></div>
<script>
// 修改選擇索引
var checkIndex;
// hidden input 值 vv為空時，是新增事件有值的時候，是更新資料
var vv = document.getElementById("vv");
// 全選/全不選
function selectAll() {
var checkAll = document.getElementById('checkAll');
// 是否全選
var checkFlag = checkAll.checked;
var subCheck = document.getElementsByClassName('subCheck');
for (var i = 0; i < subCheck.length; i++) {
subCheck[i].checked = checkFlag;
}
}
// 關閉模態框
function closeModel() {
// 模態框
var mymodel = document.getElementById("mymodel");
mymodel.style.display = 'none';
// 遮罩
var mask = document.getElementById("mask");
mask.style.display = 'none';
}
// 彈出模態框
function showModel() {
// 重置表單
document.getElementById("myForm").reset();
// 清空vv
document.getElementById("vv").setAttribute("vv", "");
// 模態框
var mymodel = document.getElementById("mymodel");
mymodel.style.display = 'block';
// 遮罩
var mask = document.getElementById("mask");
mask.style.display = 'block';
}
// 新增/修改儲存事件
function save() {
var vvValue = vv.getAttribute("vv");
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var userclass = document.getElementById('userclass').value;
if (age == "" || name == "" || userclass == "") {
alert("請檢查是否有未填項");
} else {
if (vvValue == "" || vvValue == undefined || vvValue == null) {
var index = document.getElementsByClassName('subCheck').length + 1;
// 向tbody中新增一行
myTb.innerHTML += (`<tr> <td>
<input type="checkbox" class="subCheck">
</td>
<td>${index}</td>
<td>${name}</td>
<td>${age}</td>
<td>${userclass}</td></tr>`);
}
else {
// 拿到當前要修改的tr
var partentTR = document.getElementsByClassName("subCheck")[vvValue].parentNode.parentNode;
partentTR.childNodes[5].innerHTML = name;
partentTR.childNodes[7].innerHTML = age;
partentTR.childNodes[9].innerHTML = userclass;
}
// 關閉模態框
closeModel();
}
}
// 修改按鈕點選
function edit() {
var checkCount = 0;
var subCheck = document.getElementsByClassName('subCheck');
for (var i = 0; i < subCheck.length; i++) {
if (subCheck[i].checked == true) {
checkCount++;
checkIndex = i;
}
}
if (checkCount == 1) {
showModel();
document.getElementById("vv").setAttribute("vv", checkIndex);
var parentTr = subCheck[checkIndex].parentNode.parentNode;
document.getElementById('name').value = parentTr.childNodes[5].innerHTML;
document.getElementById('age').value = parentTr.childNodes[7].innerHTML;
document.getElementById('userclass').value = parentTr.childNodes[9].innerHTML;
} else {
alert("請選擇一條資料進行修改!");
}
}
// 刪除
function del() {
var arr = [];
var subCheck = document.getElementsByClassName('subCheck');
for (var i = 0; i < subCheck.length; i++) {
if (subCheck[i].checked == true) {
// subCheck[i].parentNode.parentNode.childNodes
arr.push(i);
}
}
if (arr.length < 1) {
alert("請至少選擇一條資料!");
} else {
// 刪除
for (var i = 0; i < arr.length; i++) {
var j = arr[i] - i;
subCheck[j].parentNode.parentNode.remove();
}
}
}
</script>
</body>
</html>

純JavaScript寫一個對錶格的簡單增刪改查操作

功能: 新增表格資料，修改表格資料，刪除表格資料。不完善區: 刪除資料之後序號沒有做處理，表單驗證簡單的提示警告，沒有文字提醒。介面: 線上檢視下面是程式碼:

Oracle+mybatis實現對資料的簡單增刪改查

第一步：--建立一個表空間：名字叫 mybatis，建在D盤下的date資料夾下：第二步：建立使用者，名字叫 lisi ,密碼為：123456 第三步：給使用者授權：第四步：我們在 lisi 使用者下建立一個emp表: 隨便插入幾個值：（這個表在網上有，可以扒下來）第五步：（這

Asp.net Core 2.1使用 EF Core 簡單增刪改查操作數據庫

generic nuget ini gen 項目 pub sass .net 增刪改查 Asp.net Core 2.1使用 EF Core 簡單增刪改查操作數據庫大概步驟如下5步： 1、創建項目（Asp.net Core 2.1項目） 2、項目使用EF Core 3、建

使用MyBatis進行對資料表的增刪改查操作

1.匯入jar包並配置MyBatis的配置檔案 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration P

使用sql標籤來實現對資料庫當中記錄增刪改查操作

1：實現向資料庫當中進行資料的插入操作 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod

java 使用DOM4J對XML檔案進行增刪改查操作

原始碼： DOM4j.java package com.zc.homeWork19; import java.io.FileWriter; import java.util.ArrayList; import java.util.Iterator; i

第六章:Django對mySQL資料庫的增刪改查操作

上一章中介紹了用Django連線MySQL資料庫,本章介紹最基本的增刪改查操作,繼續利用上一章建立的表一、新增資料 1、引入資料模組 from models import Blog

國產化之路-統信UOS + Nginx + Asp.Net MVC + EF Core 3.1 + 達夢DM8實現簡單增刪改查操作

## 專題目錄 [國產化之路-統信UOS作業系統安裝](https://www.cnblogs.com/yuanqq/p/13738341.html) [國產化之路-國產作業系統安裝.net core 3.1 sdk](https://www.cnblogs.com/yuanqq/p/13686446.htm

C#中對sqlserver進行增刪改查操作（簡單易懂）

uid 數據連接 net cti ade 密碼 logs where Go 1、添加引用using System.Data;using System.Data.SqlData;2、建立於數據庫的連接，建議將它做成一個方法，方便多次利用。string sqlconnectio

python 連線oracle資料庫對錶進行增刪改查操作

Python 建立連線oracle資料庫的三種方式：方式一：使用者名稱、密碼和監聽分開寫 import cx_Oracle db=cx_Oracle.connect('username/[email protected]/orcl') db.close()

MyBatis對資料庫的增刪改查操作，簡單示例

之前一直實用Hibernate進行開發，最近公司在使用Mybatis，根據網上的示例，做了一個簡單的Demo，以便日後複習使用XMl方式對映sql語句總體結構如下圖首先是建立一個工程，然後匯入兩個jar包，然後編寫mybatis的jdbc配置檔案Configu

利用反射實現對sqlite3資料庫的crud(增刪改查)操作的一個baseAndroidDao封裝,安卓開發中

1.說明博主主要是做java web後臺這一塊,但是偶爾做點安卓,發現安卓上沒有像Hibernate這種orm框架(....其實也沒有去找), 又覺得每次增刪改查都自己寫程式碼的話肯定是非常麻煩的,所以就寫了一個簡單的baseAndroidDao來封裝一些簡單的增刪改查操

Scala對MongoDB的增刪改查操作

自動 back localhost sts hive comm dbo 用戶 hashmap =========================================== 　　　　原文鏈接： Scala對MongoDB的增刪改查操作轉載請註明出處！ ======

使用logging模塊實現對文件增刪改查操作的紀錄（low B版）

文件 time *** tle () handle 函數賦值增刪改查操作 info #!/usr/bin/env python#對之前文件進行的增刪改查操作實現日誌操作，日誌輸出用戶進行過的操作。#!/usr/bin/env pythondef log(): imp

簡單的JDBC的增刪改查操作，附源碼

mysql 小白 http .exe let ext 打印編譯 sdn 1 package com.xyyz.jdbc; 2 3 import java.sql.Connection; 4 import java.sql.DriverManager;

簡單的JDBC的增刪改查操作->抽取了基類，附源碼

exceptio tac catch main trace 工具 nload null user 1.主程序 1 package com.xyyz.jdbc; 2 3 import java.sql.Connection; 4 import java.sql.D

JavaWeb程序利用Servlet的對SQLserver增刪改查操作

tag struct 連接失敗 -1 rop quest map rom stream 聲明:學了幾天終於將增刪改查的操作掌握了，也發現了一些問題，所以總結一下. 重點:操作數據庫主要用的是SQL語句跟其他無關. 一:前提知識:PreparedStatement

django 利用ORM對單表進行增刪改查

man api light 賦值連接取出簡單 extern follow 牛小妹上周末，一直在嘗試如何把數據庫的數據弄到界面上。畢竟是新手，搞不出來，文檔也看不懂。不過沒關系，才剛上大學。今晚我們就來解釋下，要把數據搞到界面的第一步。先把數據放到庫裏，然後再把數據從庫

Redis：五種數據類型的簡單增刪改查

war value tro sts class 例子 list集合 ring one Redis簡單增刪改查例子例一：字符串的增刪改查 #增加一個key為ay_key的值 127.0.0.1:6379> set ay_key "ay" OK #查詢ay_key的值

java學習3創建學生屬性：學號、姓名、電話完全實現對象集合的增刪改查。（控制臺來做）

main 使用 del ext str bre ack pri todo 首先創建一個student類其中包括get，set與構造函數 /** * */package work2; /** * @author Administrator * */public fina

純JavaScript寫一個對錶格的簡單增刪改查操作

相關推薦