CoderZone.org

Category: >> JavaScript >> Dynamically Add/Remove rows in HTML table Bookmark and Share

<< lastnext >>

Snippet Name: Dynamically Add/Remove rows in HTML table

Description: Dynamically add or remove rows in an HTML table.

On pressing Add Row, a dynamic row will be created and added in the table. Clicking the checkbox and pressing Delete Row will cause the row to be removed.

Also see:
» Simple directory viewer / browser
» Get Unix Timestamp for midnight to...
» Recursive Directory Browser
» Get Table Row Data On Click
» Make alternating color table rows ...
» Highlight table rows on rollover
» Converting Rows to Columns
» Selecting a Random Row
» %TYPE vs %ROWTYPE - What's the dif...
» ROWIDTONCHAR
» ROWIDTOCHAR
» CHARTOROWID
» UPDATE: Update multiple rows
» UPDATE: Single row
» Count rows in all tables
» List tables with more than 'X' rows
» ROW_NUMBER
» Easy page browser
» Hierarchical categories browser
» Recursive Directory Browser
» Browser sniffer / detector
» Grouping rows by frequency
» Select row number in MySQL
» Fast random row picker #2
» Fast random row picker #1
» Counting rows
» Alias and RowType
» Detect Mobile/WAP browser
» Find All Duplicate Rows

Comment: (none)

Author: CoderZone
Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: March 22nd, 2009

<HTML>
<HEAD>
     <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
     <SCRIPT language="javascript">
          function addRow(tableID) {
 
               var table = document.getElementById(tableID);
 
               var rowCount = table.rows.length;
               var row = table.insertRow(rowCount);
 
               var cell1 = row.insertCell(0);
               var element1 = document.createElement("input");
               element1.type = "checkbox";
               cell1.appendChild(element1);
 
               var cell2 = row.insertCell(1);
               cell2.innerHTML = rowCount + 1;
 
               var cell3 = row.insertCell(2);
               var element2 = document.createElement("input");
               element2.type = "text";
               cell3.appendChild(element2);
 
          }
 
          function deleteRow(tableID) {
               try {
               var table = document.getElementById(tableID);
               var rowCount = table.rows.length;
 
               for(var i=0; i<rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if(null != chkbox && true == chkbox.checked) {
                         table.deleteRow(i);
                         rowCount--;
                         i--;
                    }
 
               }
               }catch(e) {
                    alert(e);
               }
          }
 
     </SCRIPT>
</HEAD>
<BODY>
 
     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
 
     <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
 
     <TABLE id="dataTable" width="350px" border="1">
          <TR>
               <TD><INPUT type="checkbox" name="chk"/></TD>
               <TD> 1 </TD>
               <TD> <INPUT type="text" /> </TD>
          </TR>
     </TABLE>
 
</BODY>
</HTML>
 
 
There haven't been any comments added for this snippet yet. You may add one if you like.  Add a comment 
© coderzone.org | users online: 2