jQuery下table操作示例(附案例源码)
生活随笔
收集整理的這篇文章主要介紹了
jQuery下table操作示例(附案例源码)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
練習效果：(僅用于技術點練習)
?
<!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><script src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script>//刪除function del(o) {$(o).parent().parent().remove();}//修改function update(o) {if ($(o).text() == "修改") {$(o).text("保存");var c = $(o).parent().prevAll();var chang = $(o).parent().prevAll().length;for (var i = 0; i < chang; i++) {var text = c[i].textContent;c[i].innerHTML = "<input type='text' value='" + text + "'/>";}} else if ($(o).text() == "保存") {$(o).text("修改");var c = $(o).parent().prevAll();var chang = $(o).parent().prevAll().length;for (var i = 0; i < chang; i++) {c[i].innerHTML = $(c[i]).children().val();}}}//添加function add() {//復制元素clonevar c = $("tr:eq(1)").clone();//添加到table的最后c.appendTo($("table"));}//查詢function find() {//需要查詢的內容var cha = $("#cha").val();if (cha != "") {var result = "";var list = $("tr:gt(0)");for (var i = 0; i < list.length; i++) {if ($(list[i]).children()[0].textContent == cha) {result = $(list[i]).clone();}}if (result != "") {$("tr:gt(0)").hide();result.appendTo($("table"));}} else {window.location.reload();}}</script> </head><body><a href="#" onclick="add()">添加</a><input type="text" id="cha" /><a href="#" onclick="find()">查詢</a><table border="1"><tr><td>編號</td><td>姓名</td><td>薪水</td><td>功能</td></tr><tr><td>1</td><td>李寧</td><td>10000</td><td><a href="#" onclick="update(this)">修改</a><a href="#" onclick="del(this)">刪除</a></td></tr><tr><td>2</td><td>小灰灰</td><td>12000</td><td><a href="#" onclick="update(this)">修改</a><a href="#" onclick="del(this)">刪除</a></td></tr></table> </body></html>希望能對大家有所幫助，歡迎一鍵三連。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的jQuery下table操作示例(附案例源码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【蓝桥杯Java_C组·从零开始卷】第二
- 下一篇： 生日祝福（HTML+CSS+JavaSc