Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: Dynamically Add/Remove rows in HTML table Jump to:  
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:
» 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 differe...
» 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

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>
 


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 257 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?