要求如下：
寫一個html頁面，裡面有一個表格，儲存用戶信息，包括：用戶名，密碼，姓名，郵箱，電話，qq，身份證號。
現在要透過js對表格進行動態的增刪改查（只是內存操作即可）:
首先，加載頁面時用js加載3條初始化記錄；
有一個增加記錄的按鈕，點擊後彈出一個div層提供輸入，要求各欄位必須符合輸入格式且不能為空白：
使用者名稱：英文＋數字＋底線；
密碼：英文＋數字＋下劃線＋6位以上；
姓名：中文；
郵箱，電話，電話，身分證號符合格式；
每筆記錄有修改、刪除；
修改類似增加，要把原來值唸出來；
HTML頁碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js增删改 v1.0</title> <script src="js/test.js" type="text/javascript" charset="utf-8"></script> </head> <body > <center> <br/><br/> <h2 id="js增删改-nbsp-v">js增删改 v1.0</h2> <br/><br/> <a href="javascript:showAddInput();">添加数据</a> <br/><br/> <div class="table" > <table border="1" style="text-align:center" id="table"> <tr> <th>用户名</th> <th>密码</th> <th>姓名</th> <th>邮箱</th> <th>电话</th> <th>qq</th> <th>身份证号</th> <th>操作</th> </tr> <tr> <td>A1</td> <td>123</td> <td>a</td> <td>a@qq.com</td> <td>123456789</td> <td>40040044</td> <td>270205197405213513</td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);" >修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> </tr> <tr> <td>A2</td> <td>456</td> <td>b</td> <td>b@qq.com</td> <td>987654321</td> <td>30030033</td> <td>470205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> </tr> <tr> <td>A3</td> <td>789</td> <td>c</td> <td>c@qq.com</td> <td>800800820</td> <td>30030030</td> <td>570205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> </tr> </table> </div> <div style="display:none" id="addinfo"> <form> <br> 用户名:（用户名只能用英文+数字或下划线）<br><input type="text" id="username" /><br><!--限制用户名只能用英文 下划线 或数字--> 密码:（英文+数字或下划线，长度不小于6）<br><input type="text" id="password"/><br> 姓名:（只能是汉字）<br><input type="text" id="name"/><br> 邮箱:<br><input type="text" id="email"/><br> 电话:<br><input type="text" id="phone"/><br> qq:<br><input type="text" id="qq"/><br> 身份证:<br><input type="text" id="uid"/><br><br> <input type="button" value="提交" onclick="addInfo()" id="btn_add"> <input type="button" value="提交" onclick="updateInfo()" style="display:none" id="btn_update"> <input type="button" value="取消" onclick="hideAddInput()"> </form> </div> </center> </body> </html>
js程式碼：
var row = 0 ; //定义全局行数用于修改
var reg_email = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //用于判断邮箱格式
var reg_name = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i; //用于判断用户名格式
var reg_chinese = /^[\u0391-\uFFE5]+$/ ; //用于判断姓名格式
var reg_pass = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断密码格式
//----获取行号-----
function getRow(r){
var i=r.parentNode.parentNode.rowIndex;
return i ;
}
//----获取行号-----
//----删除某一行-----
function delRow(r){
document.getElementById('table').deleteRow(getRow(r));
}
//----删除某一行-----
//----清除添加信息框的内容-----
function cleanAddInput(){
document.getElementById('username').value='';
document.getElementById('password').value='';
document.getElementById('name').value='';
document.getElementById('email').value='';
document.getElementById('phone').value='';
document.getElementById('qq').value='';
document.getElementById('uid').value='';
}
//----清除添加信息框的内容-----
//----显示添加信息框-----
function showAddInput(){
document.getElementById('addinfo').style="display:block-inline" ;
document.getElementById('btn_add').style="display:block-inline" ;
document.getElementById('btn_update').style="display:none" ;
cleanAddInput();
}
//----显示添加信息框-----
//----隐藏添加信息框-----
function hideAddInput(){
document.getElementById('addinfo').style="display:none" ;
}
//----隐藏添加信息框-----
//----判断输入框的信息是否符合要求-----
function judge(){
//根据id获取表单信息
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var qq = document.getElementById('qq').value;
var uid = document.getElementById('uid').value;
var judge = true ; //用于判断表单信息是否符合
if(username==''){
judge = false ;
alert('请输入用户名');
}else if(password==''){
judge = false ;
alert('请输入密码');
}else if(name==''){
judge = false ;
alert('请输入姓名');
}else if(email==''){
judge = false ;
alert('请输入邮箱');
}else if(phone==''){
judge = false ;
alert('请输入电话');
}else if(qq==''){
judge = false ;
alert('请输入qq');
}else if(uid==''){
judge = false ;
alert('请输入身份证');
}else if(uid.length!=18){
judge = false ;
alert('身份证应为18位，请正确填写');
}else if(qq.length<=5 &&qq.length>=13){
judge = false ;
alert('请正确输入qq号码');
}else if(phone.length<3&&qq.length>12){
judge = false ;
alert('请正确输入电话');
}else if(!reg_email.test(email)){
judge = false ;
alert('邮箱格式不正确');
}else if(!reg_name.test(username)){
judge = false ;
alert('用户名格式不正确');
}else if(!reg_chinese.test(name)){
judge = false ;
alert('姓名格式不正确');
}else if((!reg_pass.test(password))||password.length<6){
judge = false ;
alert('密码格式不正确');
}
return judge ;
}
//----判断输入框的信息是否符合要求-----
//----新增信息的插入方法-----
function insertInfo(){
//根据id获取表单信息
var arr = new Array();
arr[0] = document.getElementById('username').value;
arr[1] = document.getElementById('password').value;
arr[2] = document.getElementById('name').value;
arr[3] = document.getElementById('email').value;
arr[4] = document.getElementById('phone').value;
arr[5] = document.getElementById('qq').value;
arr[6] = document.getElementById('uid').value;
arr[7] ="<a style='text-align:center;color:blue;cursor:pointer;' onclick='updateRow(this);'>修改</a> <a style='text-align:center;color:blue;cursor:pointer;' onclick='delRow(this);'>删除</a>";
var x = document.getElementById('table').insertRow(1); //获取第一行对象
for(var i=0;i<arr.length;i++){
x.insertCell(i).innerHTML = arr[i] ; //用循环把每个数据插入第一行的每一列
}
}
//----新增信息的插入方法-----
//----新增信息-----
function addInfo(){
if(judge()==true){
alert('添加成功');
insertInfo(); //执行插入
hideAddInput(); //隐藏添加信息框
}else{
alert('添加失败');
}
}
//----新增信息-----
//----根据行号修改信息-----
function updateRow(r){
row = getRow(r); //把该行号赋值给全局变量
showAddInput(); //显示修改表单
//提交按钮替换
document.getElementById('btn_add').style="display:none" ;
document.getElementById('btn_update').style="display:block-inline" ;
insertInputFromQuery(queryInfoByRow(row));
}
//----根据行号修改信息-----
//----根据行号查信息----
function queryInfoByRow(r){
var arr = new Array();
for(var m=0 ; m<7;m++){
arr[m] = document.getElementById('table').rows[row].cells[m].innerText;
}
return arr ; //返回该行数据
}
//----根据行号查信息----
//----把查询到的信息放入修改的表单里----
function insertInputFromQuery(arr){
document.getElementById('username').value = arr[0];
document.getElementById('password').value = arr[1];
document.getElementById('name').value = arr[2];
document.getElementById('email').value = arr[3];
document.getElementById('phone').value = arr[4];
document.getElementById('qq').value = arr[5];
document.getElementById('uid').value = arr[6];
}
//----把查询到的信息放入修改的表单里----
function updateInfo(){
if(judge()==true){
alert('修改成功');
document.getElementById('table').deleteRow(row);//删除原来那行
insertInfo(); //插入修改后的值
hideAddInput(); //隐藏添加模块
}else{
alert('修改失败');
hideAddInput();
}
}以上就是本文的全部內容，希望以上對大家的學習有幫助，也希望大家多多支持PHP中文網。
更多JS對HTML表格進行增刪改操作相關文章請關注PHP中文網！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AMJavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi
構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造
如何在瀏覽器中優化JavaScript代碼以進行性能？Mar 18, 2025 pm 03:14 PM本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？Mar 18, 2025 pm 03:16 PM本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
jQuery矩陣效果Mar 10, 2025 am 12:52 AM將矩陣電影特效帶入你的網頁！這是一個基於著名電影《黑客帝國》的酷炫jQuery插件。該插件模擬了電影中經典的綠色字符特效，只需選擇一張圖片，插件就會將其轉換為充滿數字字符的矩陣風格畫面。快來試試吧，非常有趣！ 工作原理 插件將圖片加載到畫布上，讀取像素和顏色值： data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data 插件巧妙地讀取圖片的矩形區域，並利用jQuery計算每個區域的平均顏色。然後，使用
如何構建簡單的jQuery滑塊Mar 11, 2025 am 12:19 AM本文將引導您使用jQuery庫創建一個簡單的圖片輪播。我們將使用bxSlider庫，它基於jQuery構建，並提供許多配置選項來設置輪播。 如今，圖片輪播已成為網站必備功能——一圖胜千言！ 決定使用圖片輪播後，下一個問題是如何創建它。首先，您需要收集高質量、高分辨率的圖片。 接下來，您需要使用HTML和一些JavaScript代碼來創建圖片輪播。網絡上有很多庫可以幫助您以不同的方式創建輪播。我們將使用開源的bxSlider庫。 bxSlider庫支持響應式設計，因此使用此庫構建的輪播可以適應任何
如何使用Angular上傳和下載CSV文件Mar 10, 2025 am 01:01 AM數據集對於構建API模型和各種業務流程至關重要。這就是為什麼導入和導出CSV是經常需要的功能。在本教程中，您將學習如何在Angular中下載和導入CSV文件
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
Dreamweaver Mac版
視覺化網頁開發工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
記事本++7.3.1
好用且免費的程式碼編輯器
