javascript（jquery）实现表格的编辑以及遮罩层的实现！

最新推荐文章于 2022-10-19 10:15:00 发布

Fly_Sky520

最新推荐文章于 2022-10-19 10:15:00 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript学习笔记文章标签： javascript jquery table function class input

本文链接：https://blog.youkuaiyun.com/Fly_Sky520/article/details/6208279

Javascript学习笔记专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现表格的编辑功能，并结合遮罩层进行交互。通过点击表格行，可以选中和取消选中，当选中行数大于1时，编辑按钮禁用，删除按钮启用；当只有一个选中行时，编辑和删除按钮均可用。同时，文章还展示了全选和反选功能，以及创建遮罩层对话框来编辑选定行的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

㈠html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="table.css" mce_href="table.css" rel="stylesheet" type="text/css" /> <mce:script language="javascript" src="jquery-1.4.3.min.js" mce_src="jquery-1.4.3.min.js"></mce:script> <mce:script src="edittable.js" mce_src="edittable.js" type="text/javascript"></mce:script> </head> <body> <table> <thead> <tr> <th>编号</th> <th>管理员</th> <th>密码</th> <th>邮箱</th> <th>联系方式</th> <th>组类</th> <th>注册时间</th> <th>备注</th> </tr> </thead> <tbody> <tr class="element"> <td>1</td> <td>张三</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>1</td> <td>2010-12-01</td> <td>超级管理员</td> </tr> <tr class="element"> <td>2</td> <td>李四</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>2</td> <td>2010-12-01</td> <td>管理员</td> </tr> <tr class="element"> <td>3</td> <td>王五</td> <td>345621</td> <td>hello@163.com</td> <td>12345678987</td> <td>1</td> <td>2010-12-01</td> <td>超级管理员</td> </tr> </tbody> <tfoot> <tr><td colspan="9" class="buttons"> <input value="编辑" type="button" class="editbutton" disabled="true"> <input value="删除" type="button" class="delbutton" disabled="true"> <input value="全选" type="button" class="allselect"> </td></tr> </tfoot> </table> </body> </html>

㈡js文件(edittable.js)

$(function(){ var item_checkedIds = new Array();//放编号的数组 var item_checkedValues = new Array();//放用户名的数组 var item_i = 0; var item_j = 0; var $item_checked = null; //点击行的操作 $("table tbody .element").click(function(){ if($(this).attr("class")=="element"){//如果单击是没有被选中 $(this).addClass("element_checked");//增加已选的css效果 item_checkedIds[item_i++] = $(this).children().eq(0).text();//把选择行的id（编号）放入数组 item_checkedValues[item_j++] = $(this).children().eq(1).text();//把选择行的管理员名放入数组 buttonDisabled(item_checkedIds.length);//判断下面按钮是否会被点亮 }else{//如果单击时已经被选中 $(this).removeClass("element_checked");//去掉已选效果 removeItem($(this).children().eq(0).text(),item_checkedIds);//从数组中删除选择行的编号(id) item_i--;//数组长度减一 removeItem($(this).children().eq(1).text(),item_checkedValues);//从数组中删除选择行的管理员名称 item_j--;//数组长度减一 buttonDisabled(item_checkedIds.length);//判断下面按钮是否会被点亮 } }) function buttonDisabled(val){ if(val>1){//如果选择的个数大于1，编辑按钮不点亮，删除按钮点亮 $("table tfoot .delbutton").removeAttr("disabled"); $("table tfoot .editbutton").attr("disabled","true"); }else if(val == 1){//如果放编号的数组长度等于1，编辑跟删除按钮点亮 $("table tfoot .delbutton").removeAttr("disabled"); $("table tfoot .editbutton").removeAttr("disabled"); $("table tbody tr.element td:first-child").each(function(){//从tr中判断第一个td的text是否与数组中存放的唯一数值相等，如果相等赋值给$item_checked if($(this).text() == item_checkedIds[0]){ $item_checked = $(this).parent(); break; } }) }else{ $("table tfoot .editbutton").attr("disabled","true"); $("table tfoot .delbutton").attr("disabled","true"); } } $("table thead th input,table tfoot .allselect").toggle(function(){//全选与反选操作 $("table thead th input").attr("checked","true"); $("table tfoot .allselect").attr("value","反选"); $("table tbody .element td input").attr("checked","true"); item_i = 0; item_j = 0; $("table tbody .element").each(function(index){//把每一个编号跟管理员姓名都添加进入数组 item_checkedIds[item_i++] = $(this).children().eq(0).text(); item_checkedValues[item_j++] = $(this).children().eq(1).text(); }) $("table tbody .element").addClass("element_checked"); buttonDisabled(item_checkedIds.length); },function(){ $("table thead th input").removeAttr("checked"); $("table tfoot .allselect").attr("value","全选"); item_checkedIds.splice(0,item_checkedIds.length); item_i = 0; item_checkedValues.splice(0,item_checkedValues.length); item_j = 0; $("table tbody .element td input").removeAttr("checked"); $("table tbody .element").removeClass("element_checked"); buttonDisabled(item_checkedIds.length); }); $("table tfoot .editbutton").bind("click",function(){//创建遮罩层 $("body").append(CreateEditDialog()); ShowMiddle();//居中显示遮罩层 }); function CreateEditDialog(){//生成遮罩层对话框 var str = ""; str += "<div class='masklayer'></div><div class='visiblelayer'><form action='#' method='post'>"; str += "<table class='edit_table'><thead><tr><th colspan='2'>编辑选项</th></tr></thead><tbody>"; var $header = $("table thead th"); var headerLenght = $header.size();//获取表格表头 for(var i = 0 ; i<headerLenght ;i++){ var headerText = $header.eq(i).text();//获取表头的每一列数据 var valueText = $item_checked.children("td").eq(i).text();//获取所选行的每一列数据 if($.trim(headerText)!=""){ str += "<tr><td class='label'>"+headerText+"：</td><td><input value='"+valueText+"' type='text'></td></tr>"; } } str += "</tbody><tfoot><tr><td colspan='2' class='buttons'><input type='submit' value='提交'/>"; str += "<input type='button' class='closeEditTable' value='关闭'/></td></tr></tfoot></table></form></div>"; return str; }; function ShowMiddle(){//生成遮罩层并居中显示 var winWidth = $(window).width();//获取屏幕宽度 var winHeight = $(window).height();//获取屏幕高度 var tableWidth = $("table.edit_table").width(); var tableHeight =$("table.edit_table").height(); $(".masklayer").width(winWidth); $(".masklayer").height(winHeight); $(".masklayer").css({ "position":"absolute", "left":"0px", "top":"0px", "background-color":"#666", "filter":"alpha(opacity=80)", "opacity":0.8,//透明度为0.8 "display":"block", "z-index":10 }); $(".visiblelayer").width(tableWidth); $(".visiblelayer").height(tableHeight); var tableLeft = winWidth/2 - tableWidth/2; var tabletop = winHeight/2 - tableHeight/2; $(".visiblelayer").css({ "position":"absolute", "left":tableLeft, "top":tabletop, "background-color":"#666", "border":"2px solid #222", "display":"block", "overflow":"auto", "z-index":10 }); }; $(".edit_table .closeEditTable").live('click',function(){//关闭遮罩层 $("div").detach(".masklayer"); $("div").detach(".visiblelayer"); $(".masklayer").css("display","none"); $(".visiblelayer").css("display","none"); }); $("table tfoot .delbutton").bind("click",function(){//删除操作 var conf = confirm("确定删除（"+item_checkedValues+"）？"); if (conf==true) { window.location.href = "deletetable.html?id="+item_checkedIds;//item_checkedIds即为选择的所有id } }); function getIndexOf(val,array){//获取数组中对应数字的索引 for (var i = 0; i < array.length; i++) { if (array[i] == val) return i; } return -1; }; function removeItem(val,array) {//删除数组中的指定数字 var index = getIndexOf(val,array); if (index > -1) { array.splice(index, 1); } }; })

㈢css文件(table.css)

body{ font-size:12px; margin-top:5px; color:#999; font-family:"宋体"; } table{ margin-top:300px; margin:0 auto; padding:0 auto; width:700px; border-collapse: collapse; } table tbody{ height:300px; overflow:auto; } table td { font: normal 12px / 17px Arial; padding: 2px; border: 1px solid #91dd78; } table th { font: bold 12px / 17px Arial; text-align: center; line-height:20px; height:20px; padding:4px; font: 16px tahoma; font-weight: bold; border: 1px solid #0D0; background-color:#91cc78; } table tr { background: #DFD; height:25px; } tr,table tfoot tr{ background:#91cc78; height:25px; } table .elementcolor{ background-color:#7f0; } .label{ text-align:right; } table.edit_table{ width:550px; border-collapse: collapse; } .buttons{ text-align:right; } .element:hover{ background-color:#cdc; cursor:pointer; } .element_checked{ background-color:#bcb; }