Tutorials - DOM Table Delete Row

Add rows and delete specific rows dynamically from an HTML table

Try It

Basics

Add - Append to the end
Insert [I] - Insert at the row of the selected radio button (column I), or at the end if nothing is selected
Delete [D] - Delete all the rows for the selected checkboxes (column D)
Submit - Shows the form values in a popup window

Overview of HTML Table Delete Row

The basic concept of this script is that I store a reference to any object I want to read/modify. Keep in mind that none of this is necessary if all you want to do is delete rows, and not modify anything in the remaining rows. It's fairly straightforward to delete rows from a table (refer to tablebasics1.html). The tricky part is if you have ordered rows and they need to be renumbered client-side. That's why I wrote HTML Table Delete Row.

myRow

myRow is not part of the DOM or HTML standard. It's a custom javascript property. It's a technique that I probably first noticed at Peter-Paul Koch's quirksmode.org. One example is his Textarea Maxlength, specifically his use of a custom property he named relatedElement.

Versions of this script

Version 1.2
- 2006-02-21
- Browser Support - HTML Table Delete Row version 1.2 was tested for basic functionality in Firefox 1.5.0.1, Opera 8.02, and IE 6.0.
- Same as Version 1.1, but with alternating row background colors.
Version 1.1
- 2006-01-27
- Browser Support - HTML Table Delete Row version 1.1 was tested for basic functionality in Firefox 1.0.7, Opera 8.02, and IE 6.0.
- Version 1.1 is mostly the same as Version 1.0, but now can insert at specific rows, and everything is referenced in the TBODY.
- Had to do a little workaround to get the dynamically added radio buttons to work in IE.
Version 1.0
- 2005-08-16
- Browser Support - HTML Table Delete Row version 1.0 was tested for basic functionality in Firefox 1.0.6, Opera 8.0, and IE 6.0.
- Each dynamic row has a Delete button that deletes its row
- Each dynamic row also has a checkbox that's used in conjunction with the Delete Checked button at the top
- After the rows are deleted, the script reorders the TD text and the INPUT names
- The INPUT name is changed because they should be in order if they're going to be passed via a form submit
- Press the Submit button and the form submits to another page in a new window
- Optionally create default rows in method fillInRows that are created when the page loads. Note: This script will not work with rows coded in the HTML, because the script won't have any references to those rows' objects.

Source

The HTML below and the JavaScript listed in tabledeleterow.js (version 1.2) are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

tabledeleterow.js

The CSS

<style type="text/css">
<!--
#tblSample td, th { padding: 0.5em; }
.classy0 { background-color: #234567; color: #89abcd; }
.classy1 { background-color: #89abcd; color: #234567; }
-->
</style>

The HTML

<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Insert [I]" onclick="insertRowToTable();" />
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
</p>
<table border="0" cellspacing="0" id="tblSample">
  <thead>
  <tr>
    <th colspan="5">Sample table</th>
  </tr>
  <tr>
    <th>#</th><th>Input Text</th><th>Delete</th><th>D</th><th>I</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>
</form>

Early Attempts

I had previously released beta versions of this script. Those versions aren't online anymore, but here's a quick summary of those techniques.

BETA-1 - Assigning IDs. In this beta I set the id attribute for any object I wanted to later reference. That technique worked well enough, but the code was a mess. One of the major reasons I didn't like BETA-1 was because the new row IDs were always assigned a new number to avoid conflicts, which got them out of synch with the row numbers which are consolidated.
BETA-2 - Relative DOM references. In this beta, I got rid of the id attributes in the rows. Any objects that needed to be modified were referenced by using parent/child DOM calls. The problem with traversing the DOM is that different browsers treat table structures differently, and it makes the whole thing very inflexible.
BETA-3 and BETA-4 - These were preliminary releases of version 1.0.

Related mredkj.com Tutorials

For starters, I'd recommend [3], and if you've decided to use a DOM approach, then check out the simple examples of [1] and [2]. Then you could move on the extended examples in [4], [5], and [6]