Home > Developer > JavaScript
This article illustrates how JavaScript implements the option to select, reverse, and delete tables. Share to everyone for your reference. The implementation methods are as follows:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171-172 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> can select all the options for the deletion of the table </title> <style type=" Text/css "> body,table {margin:0; padding:0; font-size:14px; } TABLE,TR,TH,TD {border:1px solid #cdc;} th {background-color:green; width:100px;}. Oddcolor {background-color: #ccc; }. Evencolor {background-color: #fcf; overcolor {background-color: #dff;} </style> <script type= "Text/javasc Ript ">//define nested arrays var datas = [[" John ", 30," Nanchang "], [" Dick ", 25," Beijing "], [" Harry ", 20," Zhengzhou "], [" Zhao Liu ", 19," Wuhan "], [" Li Mo ", 18," Shenzhen "], ["Luo Cheng", 33, "Chongqing"], ["Wang Ping", 31, "Tianjin"], ["Liu Ping", 22, "Shanghai"], ["Yangli", 17, "Shijiazhuang"], ["Guo Li", 30, "Guangzhou"]]; Dynamically CREATE TABLE function createmytable () {var tblmain = document.getElementById ("Tblmain"); var rowscount = TblMain.rows.length ; var addrow; var Addcol; var detaIlinfos; for (var i = 0; i < datas.length i++) {addrow = Tblmain.insertrow (rowsCount-1);//Control data row added to penultimate column Addcol = Addrow.inse Rtcell (-1); addcol.innerhtml = "<input type= ' checkbox ' name= ' item '/>"; addcol.align = "center"; Control Column Center Detailinfos = datas[i]; for (var j = 0; J < Detailinfos.length; J + +) {Addcol = Addrow.insertcell ( -1); addcol.innerhtml = Detailinfos[j];} add Col = Addrow.insertcell (-1); addcol.innerhtml = "<input type= ' button ' id= ' Btndel ' + i +" ' value= ' delete ' onclick= ' Btndel (this) '/> '; addcol.align = "center"; The control column is centered rowscount++; } tablecolor (); //Set grid interval color and highlight var oldclassname; Remember the background color of the line function Tablecolor () {var tblmain = document.getElementById ("Tblmain"); var rownodes = tblmain.rows; for (var i = 1; i < rownodes.length-1; i++) {///Remove First and last rows if (i% 2 = 0) {rownodes[i].classname = "Evencolor";} else {rownodes[i].classname = "Oddcolor";} row Nodes[i].onmouseover = function () {oldclassname = This.classname; this.classname = "Overcolor";} roWnodes[i].onmouseout = function () {this.classname = Oldclassname;}} The//CheckBox full-Select Functions function Checkall () {var currentchecknode = event.srcelement; var checkallnodes = Document.getelementsbyname ( "All"); Remove all selected checkboxes without clicking the check for (var i = 0; i < checkallnodes.length i++) {if (Currentchecknode!= checkallnodes[i)) {Checkall nodes[i].checked = false; } var checkitemnodes = Document.getelementsbyname ("item"); for (var i = 0; i < checkitemnodes.length i++) {checkitemnodes[i].checked = currentchecknode.checked;}} Button selection functions function Btncheckboxsel (index) {var checkitemnodes = Document.getelementsbyname ("item"); for (var i = 0; i < Checkitemnodes.length; i++) {if (index = = 2) {checkitemnodes[i].checked =!checkitemnodes[i].checked;} else {checkitemnodes[i].checked = Inde X The Delete button function Btndel (btn) {var tblmain = document.getElementById ("Tblmain") in each row; var delrownode = Btn.parentnode . parentnode; var sMsg = "Do you want to delete the name:" "+ Delrownode.cells[1].innertext +" ", The Age is:" "+ DElrownode.cells[2].innertext + "", The city is: "" + Delrownode.cells[3].innertext + "" Data? " if (Window.confirm (SMSG)) {tblmain.tbodies[0].removechild (Delrownode); Tablecolor (); }//Delete the selected button function Btndelselectrow () {var arrdel = new Array (); var pos = 0; var itemnodes = Document.getelementsby Name ("item"); for (var i = 0; i < itemnodes.length i++) {if (itemnodes[i].checked) {Arrdel[pos] = Itemnodes[i].parentnode.parentno De pos++; } if (pos <= 0) {return;} if (!window.confirm ("Do you want to delete selected data?")) return; var tblmain = document.getElementById ("Tblmain"); for (var i = 0; i < arrdel.length i++) {tblmain.tbodies[0].removechild (arrdel[i]);} Window.onload = createmytable; </script> </head> <body> <table id= "Tblmain" cellspacing= "0" cellpadding= "10px" align= "center" > <tbody> <tr> <th><input type= "checkbox" Name= "All" onclick= "Checkall ()"/> Full selection </th> <th> name </th> <th> age </th> <th> City </th> <th> Operations </th> </tr> <tr> <th><input type= "checkbox" Name= "All" onclick= "Checkall ()"/> Select all </th> <th colspan= "4" > <input type= "button" value= "Select All" onclick= "Btncheckboxsel (1)"/> <input type= "Button" value= "onclick=" Btncheckboxsel (0) "/> <input type=" button "value=" anti-election "onclick=" Btncheckboxsel (2) " > <input type= "button" value= "Delete selected item" onclick= "Btndelselectrow ()"/> </th> </tr> </tbody> </table> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
