Quick Search:
 
 JavaScript: Dynamically Add/Remove rows in HTML table Jump to:  
Category: >> JavaScript >> Dynamically Add/Remove rows in HTML table  

<< 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:
» Make alternating color table rows auto...
» Highlight table rows on rollover
» Converting Rows to Columns
» Selecting a Random Row
» Dynamically Add/Remove rows in HTML ta...
» %TYPE vs %ROWTYPE: What's the differen...
» 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 two
» Fast random row picker one
» Counting rows
» Alias and RowType
» Detect Mobile/WAP browser

Comment: (none)

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>
 


 
   Home |    Search |    Code Library |    Sponsors |    Privacy |    Terms of Use |    Contact Us © 2003 - 2024 psoug.org