Tutorials - DOM Table Delete Row - includes a calendar

Supplement to my Table Delete Row script

Try It

Sample table
#Input TextCalendarDelete

Overview

This script is a variation of my HTML Table Delete Row script. The intention of creating a whole new version is to demonstrate how to tweak the original to do what you want. The changes made in this example include: removing columns, and adding a calendar column. I also changed setAttribute to direct property references, but that is an unrelated change just to show another way of setting the properties (as I did with my Table Add Row script).

Updates

2006-10-10 - Bug fix

There was a bug in Calendar Display 2.BETA.20060725. To test, start with the default 2 rows on page load:

  1. add 1 row
  2. delete the first row
  3. add 1 row
  4. click the calendar button in row 3
  5. pick a date

Expected result is the calendar shows up under the row 3 text box and fills row 3. Actual result in 2.BETA.20060725 it shows up under row 2 and will fill row 2.

To fix the bug, I took out all references to html ids in the calendar code. Unfortunately the way the delete row script works, no ids in the rows can be referenced, since they're not being reset when rows are deleted. This means if you decide to use another calendar script, make sure it's not using ids to reference the html elements in the rows.

Explanation

The key piece of logic that I wanted to mention in this script is how to reference the text box for a row when clicking a button in that row. Refer to the following code. 

// cell 1 - input text
var cell1 = row.insertCell(1);
var txtInp = document.createElement('input');
txtInp.type = 'text';
txtInp.name = INPUT_NAME_PREFIX + iteration;
// Don't refer to ids
//txtInp.id = INPUT_NAME_PREFIX + iteration;
txtInp.size = 40;
txtInp.value = '';
cell1.appendChild(txtInp);

// cell 2 - calendar button
var cell2 = row.insertCell(2);
var btnCal = document.createElement('input');
btnCal.type = 'button';
btnCal.value = 'Calendar';
btnCal.onclick = function () {toggleCalendar(txtInp);};
cell2.appendChild(btnCal);

function toggleCalendar is called in an anonymous inner function, and the txtInp object created above can be referenced within that function.

Table Delete Row Source

The JavaScript listed in tabledeleterow-calendar.js (version 1.2.2) is released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

The JavaScript

tabledeleterow-calendar.js

Calendar JavaScript

The JavaScript

CalendarDisplay2.js

The CSS

calendar.css

I'm releasing the calendar script as a beta for now, because it still needs some refinement. There are plenty of other calendar scripts available on the web, so if you want to use another one, it should work fairly easily with my Table Delete Row script.

Eventually I plan on releasing CalendarDisplay2 in the mredkj.com JavaScript Widget section, to go along with an old Calendar script I wrote.

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: