Internet Explorer Stops Responding When You Use a DHTML Edit Control to Delete the Last Cell or the Last Row of a Table (822534)



The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 6 (SP1)

SYMPTOMS

Internet Explorer produces an access violation when you use the Dynamic HTML (DHTML) Editing Component to dynamically delete the last cell or the last row in a table.

RESOLUTION

To work around this issue, use DHTML to detect when you are about to delete the last row or the last cell. Do not call the ExecCommand (DECMD_DELETECELLS) method or the ExecCommand (DECMD_DELETEROWS) method. Instead, set the outerHTML to null:
<html>
<body>

<object ID="myedit" CLASS="myedit" CLASSID="clsid:2D360201-FFF5-11d1-8D03-00A0C959BC0A" width=100% height=60%></object>
<object ID="mytableinfo" CLASS="mytableinfo" CLASSID="clsid:47B0DFC7-B7A3-11D1-ADC5-006008A5848C"></object>

<input type="button" value="Insert Table" onclick="OnInsertTable()">
<input type="button" value="Delete Table Row" onclick="OnDeleteRow()">
<input type="button" value="Delete Table Cell" onclick="OnDeleteCell()">
<input type="button" value="Show HTML" onclick="ShowHTML()">

<script>

// DECMD_INSERTTABLE=5022
// DECMD_DELETE=5004
// DECMD_DELETECELLS=5005
// DECMD_DELETECOLS=5006
// DECMD_DELETEROWS=5007

function OnInsertTable()
{
document.mytableinfo.NumRows=1;
document.mytableinfo.NumCols=2;
document.mytableinfo.Caption = "New Table ";
document.myedit.ExecCommand(5022,0,document.mytableinfo);
}

function getSelectedTable()
{
try
	{
	ctlRg = document.myedit.DOM.selection.createRange();	
	pelem=ctlRg.parentElement();
	i=0;
	while ((pelem.tagName!="TABLE")&&(i<20))
		{
		pelem=pelem.parentElement;
		i++;
		}
	if (i==20) return -1;
	return pelem;
	}
catch(e)
	{
	return -1;
	}
}
function getNumCells()
{
etable=getSelectedTable();
if (etable!=-1) return etable.cells.length; else return -1;
}

function ShowHTML()
{
alert(document.myedit.DocumentHTML);
}


function getNumRows()
{
etable=getSelectedTable();
if (etable!=-1) return etable.rows.length; else return -1;
}

function OnDeleteRow()
{
nbrows=getNumRows();
if (nbrows==-1) return;
if (nbrows==1)  // if last row then delete it using DHTML
	{	
	getSelectedTable().outerHTML='';
	}
else document.myedit.ExecCommand(5007);
}

function OnDeleteCell()
{
nbcell=getNumCells();
if (nbcell==-1) return;
if (nbcell==1)  // if last cell then delete it using DHTML
	{
	getSelectedTable().outerHTML='';	
	}
else document.myedit.ExecCommand(5005);
}

</script>
</body>
</html>

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

MORE INFORMATION

Steps to Reproduce the Behavior

  1. Paste the following code in Microsoft Notepad. Name the code Dhtmledit.htm:
    <html>
    <head>
    </head>
    <body>
    <form>
    <object ID="myedit" CLASS="myedit" CLASSID="clsid:2D360201-FFF5-11d1-8D03-00A0C959BC0A" width=100% height=60%>
    </object>
    <object ID="mytableinfo" CLASS="mytableinfo" CLASSID="clsid:47B0DFC7-B7A3-11D1-ADC5-006008A5848C">
    </object>
    <br>
    <input type="button" value="Insert Table" onclick="OnInsertTable()">
    <input type="button" value="Delete Table Row" onclick="OnDeleteRow()">
    <input type="button" value="Delete Table Cell" onclick="OnDeleteCell()">
    <input type="button" value="Show HTML" onclick="ShowHTML()">
    </form>
    <div id=myscript>
    <script>
    
    // OLECMDEXECOPT_DODEFAULT=0
    // DECMD_INSERTTABLE=5022
    // DECMD_DELETE=5004
    // DECMD_DELETECELLS=5005
    // DECMD_DELETECOLS=5006
    // DECMD_DELETEROWS=5007
    
    function OnInsertTable()
    {
    document.mytableinfo.NumRows=1;
    document.mytableinfo.NumCols=2;
    document.mytableinfo.Caption = "New Table ";
    document.myedit.ExecCommand(5022,0,document.mytableinfo);
    }
    
    function OnDeleteRow()
    {
    document.myedit.ExecCommand(5007);
    }
    
    function OnDeleteCell()
    {
    document.myedit.ExecCommand(5005);
    }
    
    </script>
    </div>
    </body>
    </html>
  2. Double-click Dhtmledit.htm to open the page in Internet Explorer.
  3. Click Insert Table.
  4. Click inside the table, and then click Delete Row.
  5. Notice that Internet Explorer stops responding.

REFERENCES

For more information about the DHTML Editing Component, visit the following Microsoft Developer Network (MSDN) Web site:

Modification Type:MajorLast Reviewed:10/13/2003
Keywords:kbbug KB822534 kbAudDeveloper