Home > Developer > JavaScript
How to dynamically create tables and delete columns in Javascript
This example describes how to dynamically create tables and delete columns in Javascript. Share it with you for your reference. The specific implementation method is 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 43 44 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 84 85 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 a table (and 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/javascript"> // Dynamically create a table Function createTable (){ Var divMain = document. getElementById ("divMain "); RemoveAllChild (divMain); // Delete the table that was last 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 = "row" + I + ", column" + j + "; TdNode = trNode. insertCell (-1 ); TdNode. innerHTML = "<a href = 'javascript: void (0); '>" + strTmp + "</a> "; } } DivMain. appendChild (myTable); // Add the table to the div // Event. srcElement. disabled = "true"; // disable the Add button. } // Delete All subnodes under a specified Node Function removeAllChild (nodeObj ){ While (nodeObj. hasChildNodes ()){ NodeObj. removeChild (nodeObj. firstChild ); } } // Delete a row Function DeleteRow (){ Var rowNum = document. getElementById ("delRow"). value; Var tbl = document. getElementById ("DynamicTable ");
If (tbl = null ){ Alert ('create a table first '); Return; } If (rowNum <= tbl. rows. length) & (rowNum> 0 )){ Tbl. deleteRow (rowNum-1 ); } Else { Alert ('enter a valid row! '); } } // Delete a column Function DeleteCol (){ Var colNum = document. getElementById ("delCol"). value; Var tbl = document. getElementById ("DynamicTable "); If (tbl = null ){ Alert ('create a table first '); Return; } If (tbl. rows. length <= 0 ){ Alert ('table does not have 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 ('specifies that the column does not exist '); } } </Script> </Head> <Body> Enter the number of rows <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> |
I hope this article will help you design javascript programs.
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
