jQuery实现表格的增加、修改、删除、保存代码_jquery实现表格修改功能资源-CSDN文库

共8个文件

html：4个

js：3个

css：1个

需积分: 22 47 浏览量 2020-12-30 15:38:10 上传评论收藏 98KB RAR 举报

在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本教程将深入探讨如何使用jQuery实现表格的增加、修改、删除和保存功能，这些功能是许多Web应用程序的核心部分，特别是在数据管理界面中。 ### 增加在jQuery中，增加表格行通常是通过动态创建`<tr>`元素并将其插入到`<tbody>`内来实现的。我们需要创建一个HTML表单，让用户输入新行的数据。然后，当用户提交表单时，捕获这些值并构建新的表格行。以下是一个简单的示例： ```html <form id="add-form"> <input type="text" name="name" placeholder="Name" /> <input type="text" name="age" placeholder="Age" /> <button type="submit">Add</button> </form> <table id="data-table"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody></tbody> </table> ``` ```javascript $("#add-form").on("submit", function(e) { e.preventDefault(); var newRow = $("<tr><td></td><td></td></tr>"); newRow.find("td:eq(0)").text($("input[name='name']").val()); newRow.find("td:eq(1)").text($("input[name='age']").val()); $("#data-table tbody").append(newRow); }); ``` ### 修改修改表格数据通常涉及到选中某一行，显示一个可编辑的表单，然后在用户完成编辑后更新该行。以下是一个简单的实现方法： ```javascript $("#data-table").on("click", "tr", function() { $(this).addClass("edit-mode"); $(this).find("td").each(function(index) { if (index !== 0) { // 避免编辑选择列 var input = $("<input type='text'>").val($(this).text()); $(this).html(input); } }); }); $("#data-table").on("blur", "input", function() { var row = $(this).closest("tr"); row.removeClass("edit-mode"); row.find("td").each(function(index) { if (index !== 0) { $(this).text($(this).find("input").val()); } }); }); ``` ### 删除删除表格行则需要监听一个删除按钮或链接，然后移除对应的`<tr>`元素： ```html  <tr> <td>Name1</td> <td>Age1</td> <td><button class="delete-btn">Delete</button></td> </tr> ``` ```javascript $("#data-table").on("click", ".delete-btn", function() { $(this).closest("tr").remove(); }); ``` ### 保存保存表格数据通常涉及到将当前状态的表格数据发送到服务器进行持久化存储。这可以通过Ajax请求实现。以下是一个基本的Ajax保存示例，使用了jQuery的`$.ajax`方法： ```javascript function saveData() { var data = []; $("#data-table tbody tr").each(function() { data.push({ name: $(this).find("td:eq(0)").text(), age: $(this).find("td:eq(1)").text() }); }); $.ajax({ url: "/api/save", method: "POST", contentType: "application/json", data: JSON.stringify(data), success: function(response) { alert("Data saved successfully!"); }, error: function(xhr, status, error) { alert("Error saving data: " + error); } }); } ``` 在这个例子中，我们首先从表格中收集所有行的数据，然后将这些数据以JSON格式发送到服务器。请注意，实际应用中你需要根据你的后端API调整URL、HTTP方法和数据格式。以上就是使用jQuery实现表格增加、修改、删除和保存功能的基本步骤。在实际项目中，你可能还需要考虑错误处理、数据验证、用户交互反馈等更复杂的情况。通过理解这些基本概念，你可以灵活地扩展和定制自己的功能，以满足特定项目的需求。

资源详情

资源评论

资源推荐

收起资源包目录

Use_Table.rar （8个子文件）

Use_Table

游戏.html 21KB

拖动（ok）.html 2KB

myjs.js 3KB

jquery-3.3.1.min.js 85KB

jquery-ui.min.js 248KB

css

mycss.css 888B

table.html 3KB

拖动downup.html 9KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD><TITLE>看你能坚持几秒</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css>UNKNOWN { document: } UNKNOWN { var: new Date(); starttime: today.getTime() } UNKNOWN { var: new Date(); endtime: today.getTime() } UNKNOWN { var: (endtime - starttime - 0)/1000; return: } UNKNOWN { return: ; if: document.layers[divname].left; else: parseInt(document.getElementById(divname).style.left + "") } UNKNOWN { return: ; if: document.layers[divname].top; else: parseInt(document.getElementById(divname).style.top + "") } UNKNOWN { if: xpos; else: xpos } UNKNOWN { if: ypos; else: ypos } UNKNOWN { var: 0; if: = 'y' ) { if (isNS4) divsize = document.layers[divname].clip.height; else: iif(isIE4||isIE5)divsize=document.all(divname).style.pixelHeight; elseif: ((isNS6)divsize=parseInt(document.getElementById(divname).style.height + "" ); } else if ( dimension ==' x') { if: ((isNS4)divsize=document.layers[divname].clip.width; elseif: ((isIE4||isIE5)divsize=document.all(divname).style.pixelWidth; elseif: ((isNS6)divsize=parseInt(document.getElementById(divname).style.width + "");} return divsize } UNKNOWN { var: "enemy" + num + "" var difX = giveposX( 'box' ) - giveposX(enemy) - 0; 0: giveposY( 'box' ) - giveposY(enemy) - 0; set: 1 if it is touching an enemy if (difX > (-1 * givesize( 'box' , 'x' )) && difX < givesize(enemy, 'x' ) && difY > (-1 * givesize( 'box' , 'y' )) && difY < givesize(enemy, 'y' )) { touch = 1; } else touch =0 } UNKNOWN { var: giveposY(enemy) + (step_y*enemyydir[num]) + 0; if: = 1) { stop(); reset: ((); }; setposX: ; setposY: ; checktouching: } UNKNOWN { else: 10; gametime: gametime + 1 if (gametime >= 0 && gametime < 100) speed = 80; window: "speed: " + speed + " gametime: " + gametime; movenemy: ; setTimeout: } UNKNOWN { var: giveposY( 'box' ); if: ; setposX: ; setposY: ; curY: (isNS4||isNS6)?e.pageY:window.event.y; curX2: eval(curX - 40); curY2: eval(curY - 40); boxX: eval(curX - 20); boxY: eval(curY - 20) } UNKNOWN { if: ; moving: 0 } UNKNOWN { if: ; moving: 0; endclock: } UNKNOWN { document: ; var: window.confirm('Enter your name?'); if: ; window: ; finaltime: calctime() } UNKNOWN { if: = 1 && touch == 0){ setposX( 'box' ,boxX); setposy: (( 'box' ,boxY); if: ((curY>69&&curX>69&&curY<381&&curX<381)returnfalse; elsestop: (();reset();} else if ( touch ==1){stop();reset();}; checktouching: ; curY: ( isNS4 || isNS6) ? e.pageY : window.event.y; boxX: eval(curX -20); boxY: eval(curY -20); curX: ( isNS4 || isNS6) ? e.pageX : window.event.x } </STYLE> <SCRIPT type=text/javascript> isNS4 = (document.layers) ? true : false; isIE4 = (document.all && !document.getElementById) ? true : false; isIE5 = (document.all && document.getElementById) ? true : false; isNS6 = (!document.all && document.getElementById) ? true : false; var curX, curY, curX2, curY2, boxX, boxY, moving=0, touch=0; var gametime=0, started=0, speed; var starttime, endtime, finaltime=0; //pass finaltime to popup window to ask for initials var enemyxdir = new Array(1,1,1,1); var enemyydir = new Array(1,1,1,1); if (isNS4 || isNS6){ document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE); } document.onmousedown = start; document.onmousemove = checkLocation; document.onmouseup = stop; function startclock() {var today = new Date(); starttime = today.getTime();} function endclock() {var today = new Date(); endtime = today.getTime();} function calctime() {var time = (endtime - starttime - 0)/1000; return time;} function giveposX(divname) { if (isNS4) var posLeft = document.layers[divname].left; else if (isIE4 || isIE5) var posLeft = document.all(divname).style.pixelLeft; else if (isNS6) var posLeft = parseInt(document.getElementById(divname).style.left + ""); return posLeft; } function giveposY(divname) { if (isNS4) var posTop = document.layers[divname].top; else if (isIE4 || isIE5) var posTop = document.all(divname).style.pixelTop; else if (isNS6) var posTop = parseInt(document.getElementById(divname).style.top + ""); return posTop; } function setposX(divname, xpos) { if (isNS4) document.layers[divname].left = xpos; else if (isIE4 || isIE5) document.all(divname).style.pixelLeft = xpos; else if (isNS6) document.getElementById(divname).style.left = xpos; } function setposY(divname, ypos) { if (isNS4) document.layers[divname].top = ypos; else if (isIE4 || isIE5) document.all(divname).style.pixelTop = ypos; else if (isNS6) document.getElementById(divname).style.top = ypos; } function givesize(divname, dimension) { var divsize = 0; if (dimension == 'y') { if (isNS4) divsize = document.layers[divname].clip.height; else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelHeight; else if (isNS6) divsize = parseInt(document.getElementById(divname).style.height + ""); } else if (dimension == 'x') { if (isNS4) divsize = document.layers[divname].clip.width; else if (isIE4 || isIE5) divsize = document.all(divname).style.pixelWidth; else if (isNS6) divsize = parseInt(document.getElementById(divname).style.width + ""); } return divsize; } // check to see if 'box' is touching 'enemy1' function checktouching(num) { var enemy = "enemy" + num + "" var difX = giveposX('box') - giveposX(enemy) - 0; // -0 converts to integer var difY = giveposY('box') - giveposY(enemy) - 0; // set touch = 1 if it is touching an enemy if (difX > (-1 * givesize('box', 'x')) && difX < givesize(enemy, 'x') && difY > (-1 * givesize('box', 'y')) && difY < givesize(enemy, 'y')) { touch = 1; } else touch = 0; } function movenemy(num,step_x,step_y){ var enemy = "enemy" + num + "" var enemyx = givesize(enemy, 'x'); var enemyy = givesize(enemy, 'y'); if (giveposX(enemy) >= (450 - enemyx) || giveposX(enemy) <= 0) { enemyxdir[num] = -1 * enemyxdir[num]; } if (giveposY(enemy) >= (450 - enemyy) || giveposY(enemy) <= 0) { enemyydir[num] = -1 * enemyydir[num]; } var newposx = giveposX(enemy) + (step_x*enemyxdir[num]) + 0; var newposy = giveposY(enemy) + (step_y*enemyydir[num]) + 0; setposX(enemy, newposx); setposY(enemy, newposy); checktouching(num + ""); if (touch == 1) { stop(); reset(); } } function movenemies() { gametime = gametime + 1 if (gametime >= 0 && gametime < 100) speed = 80; else if (gametime >= 100 && gametime < 200) speed = 60; else if (gametime >= 200 && gametime < 300) speed = 40; else if (gametime >= 300 && gametime < 400) speed = 30; else if (gametime >= 400 && gametime < 500) speed = 20; else speed = 10; movenemy(0,-10,12); movenemy(1,-12,-20); movenemy(2,15,-13); movenemy(3,17,11); setTimeout(movenemies,speed); } function start(e) { if (started == 0) { movenemies(); startclock(); started = 1; } curX = (isNS4 || isNS6) ? e.pageX : window.event.x ; curY = (isNS4 || isNS6) ? e.pageY : window.event.y ; curX2 = eval(curX - 40); curY2 = eval(curY - 40); boxX = eval(curX - 20); boxY = eval(curY - 20); var boxleft = giveposX('box'); var boxtop = giveposY('box'); if (curX > boxleft && curX2 < boxleft && curY > boxtop && curY2 < boxtop) { moving = 1; setposX('box', boxX); setposY('box', boxY); if (isNS4 || isNS6){ document.captureEvents(Event.MOUSEMOVE); } } } function stop(e){ moving=0; if (isNS4 || isNS6){ document.releaseEvents(Event.MOUSEMOVE); } } funct