Tips and Tricks in a world of Mix

In html just enter  the buttons

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title></title>

   5:     <script src="global.js"></script>

   6:     <link href="style.css" rel="stylesheet" />

   7: </head>

   8: <body>

   9:      <input type="submit" value="New Table" onClick="generate_table()"/>

  10:      <input type="submit" value="New Row" onClick="addRow()"/>

  11:     <input type="submit" value="Delete Row" onClick="deleteRow()"/>

  12:    

  13: </body>

  14: </html>

 

At javascript pure will create the tags and append to the html existing tags.

CreateRow is extraxted to function for reuse.

   1: function generate_table() {

   2:     // get the reference for the body

   3:     var body = document.getElementsByTagName("body")[0];

   4:  

   5:     // creates a <table> element and a <tbody> element

   6:     var tbl = document.createElement("table");

   7:     var tblBody = document.createElement("tbody");

   8:  

   9:     createRow(tbl);

  10:  

  11:      // put the <tbody> in the <table>

  12:     tbl.appendChild(tblBody);

  13:     // appends <table> into <body>

  14:     body.appendChild(tbl);

  15:   

  16: }

  17:     

  18: function addRow() {

  19:     var table =  document.getElementsByTagName("table")[0];

  20:     createRow(table);

  21: }

  22:  

  23: function createRow(table) {

  24:     var rowCount = table.rows.length;

  25:     var row = table.insertRow(rowCount);

  26:  

  27:     var cell1 = row.insertCell(0);

  28:     var element1 = document.createElement("input");

  29:     element1.type = "checkbox";

  30:     element1.name = "chkbox[]";

  31:     cell1.appendChild(element1);

  32:  

  33:     var cell2 = row.insertCell(1);

  34:     cell2.innerHTML = rowCount + 1;

  35:  

  36:     var cell3 = row.insertCell(2);

  37:     var element2 = document.createElement("input");

  38:     element2.type = "text";

  39:     element2.name = "txtbox[]";

  40:     cell3.appendChild(element2);

  41: }

  42:  

  43: function deleteRow() {

  44:     try {

  45:         var table = document.getElementsByTagName("table")[0];

  46:         var rowCount = table.rows.length;

  47:  

  48:         for (var i = 0; i < rowCount; i++) {

  49:             var row = table.rows[i];

  50:             var chkbox = row.cells[0].childNodes[0];

  51:             if (null != chkbox && true == chkbox.checked) {

  52:                 table.deleteRow(i);

  53:                 rowCount--;

  54:                 i--;

  55:             }

  56:  

  57:  

  58:         }

  59:     } catch (e) {

  60:         alert(e);

  61:     }

  62: }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: