JavaScript (jquery) Implementation of table editing and mask layer implementation!

㈠html file

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >

㈡js file (edittable.js)

$ (function () {var item_checkedids = new Array ()//put numbered array var item_checkedvalues = new Array ();//put array of user names var item_i = 0; va R item_j = 0; var $item _checked = null; Click the action of the row $ ("table tbody. Element"). Click (function () {if ($ (this). attr ("class") = = "Element") {//If clicked is not selected $ (this). AddClass ("element_checked");//Increase the selected CSS effect item_checkedids[item_i++] = $ (this). Children (). EQ (0). text ();// Put the ID (number) of the selected row into the array item_checkedvalues[item_j++] = $ (this). Children (). EQ (1). Text ()///Put the administrator name of the selected row into an array buttondisabled (item _checkedids.length)//Determine if the button below will be lit}else{//if clicked $ (this) is already selected. Removeclass ("element_checked");//Remove selected effects RemoveItem ( $ (this). Children (). EQ (0). Text (), item_checkedids);//delete the number (ID) of the selected row from the array item_i--;//the length of the array minus one removeitem (this). Children (). EQ (1). Text (), item_checkedvalues);//Remove the administrator name of the selected row from the array item_j--;//array length minus one buttondisabled (item_ Checkedids.length)//To determine if the button below will be lit}}) function Buttondisabled (val) {if (val>1) {//If the number of selections is greater than 1, the edit button is not lit and the delete button is lit $ (" Table tfoot. Delbutton "). Removeattr (" Disabled "); $ ("Table tfoot. Editbutton"). ATTR ("Disabled", "true"); }else if (val = = 1) {//If the array length of the number is equal to 1, the Edit and delete buttons are lit $ ("table tfoot. Delbutton"). Removeattr ("Disabled"); $ ("Table tfoot. Editbutton "). Removeattr (" Disabled "); $ ("Table tbody tr.element td:first-child"). each (function () {//Determines whether the first TD's text is equal to the unique value stored in the array in TR, if the equal assignment to the $item_checked if ($ (this). Text () = = Item_checkedids[0]) {$item _checked = $ (this). parent (); }else{$ ("Table tfoot. Editbutton"). attr ("Disabled", "true"); $ ("Table tfoot. Delbutton"). attr ("Disabled", "true");} $ ("Table thead th input,table tfoot. Allselect"). Toggle (function () {//Select all vs. reverse operation $ ("Table thead th input"). attr ("Checked", " True "); $ ("Table tfoot. Allselect"). attr ("value", "reverse election"); $ ("table tbody. Element td Input"). attr ("Checked", "true"); item_i = 0; Item_j = 0; $ ("table tbody. Element"). each (function (index) {//Add each number to the administrator name into the array 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", "Select All"); 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 () {///Create Matte Layer $ ("body"). Append (Createeditdialog ()); Showmiddle ();//centered Mask layer}); function Createeditdialog () {//Generate Matte Layer dialog box var str = ""; STR + + "<div class= ' masklayer ' ></div><div class= ' visiblelayer ' ><form action= ' # ' method= ' post ' > "; str = "<table class= ' edit_table ' ><thead><tr><th colspan= ' 2 ' > Edit Options </th></tr> </thead><tbody> "; var $header = $ ("Table thead th"); var headerlenght = $header. Size ()//Get table header for (var i = 0; I

㈢css file (TABLE.CSS)

body{font-size:12px; margin-top:5px; color: #999; font-family: "XXFarEastFont-Arial"; table{margin-top:300px; margin:0 Auto; padding:0 a UTO; width:700px; Border-collapse:collapse; Table tbody{height:300px Overflow:auto} table td {Font:normal 12px/17px Arial; padding:2px border:1px 91dd78; Table th {font:bold 12px/17px Arial; text-align:center; line-height:20px; height:20px; padding:4px; font:16px Taho Ma 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{b Ackground-color: #7f0; }. label{text-align:right; table.edit_table{width:550px; border-collapse:collapse;}. buttons{text-align:right; lement:hover{background-color: #cdc; cursor:pointer; element_checked{background-color: #bcb;}