Home > Developer > JavaScript
This example describes the way JavaScript dynamically creates tables and deletes rows and columns. 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 | <! 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> dynamically create tables (also delete rows and columns) </title> <style type=" Text/css "> Body,div {margin:0; padding:0; font-size:14px; Table {margin:0 Auto;} td {Border:1px solid green; Text-align:center} </style> <script type= "Text/javascri PT ">//Dynamically CREATE TABLE function CreateTable () {var divmain = document.getElementById (" Divmain "); Removeallchild (Divmain); Delete the last table added var myTable = document.createelement ("table"); Mytable.id = "DynamicTable"; var myrow = document.getElementById ("Myrow"). Value; var MyCol = document.getElementById ("MyCol"). Value; var Trnode; var Tdnode; var strtmp; for (var i = 1; I <= myrow. i++) {Trnode = Mytable.insertrow ( -1); for (var j = 1; J <= MyCol; j +) {strtmp = "L" + I + "row, first" + j + "column"; TdnoDe = Trnode.insertcell (-1); tdnode.innerhtml = "<a href= ' javascript:void (0); ' > "+ strtmp + </a>"; } divmain.appendchild (myTable); Add a table to the div//event.srcelement.disabled = "true"; Add button disable//delete all child nodes under the specified node function removeallchild (NODEOBJ) {while (Nodeobj.haschildnodes ()) {Nodeobj.removechild ( Nodeobj.firstchild); }//Delete line function deleterow () {var rownum = document.getElementById ("Delrow"). value; var tbl = document.getElementById (" DynamicTable "); if (TBL = null) {alert (' CREATE table first '); return; if ((RowNum <= tbl.rows.length) && (rownum > 0)) {tbl. DeleteRow (rowNum-1); else {alert (' Please enter a valid row! ');} Delete Column function Deletecol () {var colnum = document.getElementById ("Delcol"). value; var tbl = document.getElementById ("Dyn Amictable "); if (TBL = = null) {alert (' CREATE table first '); return} if (tbl.rows.length<=0) {alert (' table does not exist row '); return; if (Colnum <= tbl . Rows[0].cells.length) && (Colnum > 0)) {for (var i = 0; i < tbl.rows.length; i++{Tbl.rows[i].deletecell (colNum-1);}} else {alert (' Specify column does not exist ');} </script> </head> <body> Please input the number of lines <input type= "text" id= "Myrow"/>, enter the number of columns <input type= "text" id= " MyCol "/><br/> <input type=" button "value=" CREATE TABLE "onclick=" CreateTable () "/><br/> <input type=" Text "id=" Delrow "/><input type=" button "value=" Delete Row "onclick=" DeleteRow () "/><br/> <input type=" text "Id=" Delcol "/><input type=" button "value=" delete column "onclick=" Deletecol () "/><br/> <div id=" DivMain "> </div> </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
