Tutorials - DOM Table Delete Row

Add rows and delete specific rows dynamically from an HTML table

Try It

Sample table
#Input TextDeleteDI

Basics

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

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.

Related mredkj.com Tutorials

  1. DOM table methods
  2. DOM - Refer to table cells
  3. innerHTML vs. DOM vs. cloneNode
  4. DOM Table Add Row
  5. DOM Table Delete Row
  6. DOM Table Delete Row - includes a calendar

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]

About this page: