系统:XP IE6小弟想在表格中动态插入一行或一列,但运行时提示“对象不支持此属性或方法”请问是什么原因?
错误就发生在InsertRow及下面几个函数中。<!--实现右键菜单功能--><html> <body oncontextmenu = showMenu()> <table border="1" cellspacing="0" cellpadding="0" width="50%">
<tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
</table>
</body>
<!-- 这里用来定义需要显示的右键菜单 --> <div id="itemMenu" style="display:none"> <table border="1" width="100%" height="100%" bgcolor="#dcdcdc" style="border:thin" cellspacing="0"> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertRow()">
插入一行
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertCol();">
插入一列
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelRow()">
删除该行
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelCol()">
删除该列
</td>
</tr>
</table>
</div>
<!-- 右键菜单结束-->
</html>
<script language="JavaScript">
<!---全局变量->
var tableObj;
var RowID;
var ColID;<!--显示右键菜单-->
function showMenu()
{
if(event.srcElement.tagName == "TD" || event.srcElement.tagName == "TH")
{
tableObj = event.srcElement.parentElement;
RowID = event.srcElement.parentElement.rowIndex;
ColID = event.srcElement.cellIndex;
popMenu(itemMenu,100);
event.returnValue=false;
event.cancelBubble=true;
}
else
{
event.returnValue=true;
event.cancelBubble=false;
}
return false;
}
<!--显示弹出菜单menuDiv:右键菜单的内容width:行显示的宽度-->function popMenu(menuDiv,width)
{
//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数
var rowCount=rowObjs.length; //循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
rowObjs[i].style.display=""; //设置鼠标滑入该行时的效果
rowObjs[i].cells[0].onmouseover=function()
{
this.style.background="#0080ff";
this.style.color="white";
} //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function()
{ this.style.background="#dcdcdc"; this.style.color="black";
}
}//end for //屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
} //选择右键菜单的一项后,菜单隐藏
pop.document.onclick=function()
{
pop.hide();
} //显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;
}<!--弹出式菜单项的回调函数-->
/*弹出式菜单项的回调函数*/function InsertRow()
{
tableObj.insertRow(RowID+1);
}function InsertCol()
{
for(var i=0;i<tableObj.rows.length;i++)
{
tableObj.rows[i].insertCell(ColID+1);
}
}function DelRow()
{
tableObj.deleteRow(RowID);
}function DelCol()
{
for(var i=0;i<tableObj.rows.length;i++)
{
tableObj.rows[i].deleteCell(ColID);
}
}</script>
错误就发生在InsertRow及下面几个函数中。<!--实现右键菜单功能--><html> <body oncontextmenu = showMenu()> <table border="1" cellspacing="0" cellpadding="0" width="50%">
<tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
</table>
</body>
<!-- 这里用来定义需要显示的右键菜单 --> <div id="itemMenu" style="display:none"> <table border="1" width="100%" height="100%" bgcolor="#dcdcdc" style="border:thin" cellspacing="0"> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertRow()">
插入一行
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertCol();">
插入一列
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelRow()">
删除该行
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelCol()">
删除该列
</td>
</tr>
</table>
</div>
<!-- 右键菜单结束-->
</html>
<script language="JavaScript">
<!---全局变量->
var tableObj;
var RowID;
var ColID;<!--显示右键菜单-->
function showMenu()
{
if(event.srcElement.tagName == "TD" || event.srcElement.tagName == "TH")
{
tableObj = event.srcElement.parentElement;
RowID = event.srcElement.parentElement.rowIndex;
ColID = event.srcElement.cellIndex;
popMenu(itemMenu,100);
event.returnValue=false;
event.cancelBubble=true;
}
else
{
event.returnValue=true;
event.cancelBubble=false;
}
return false;
}
<!--显示弹出菜单menuDiv:右键菜单的内容width:行显示的宽度-->function popMenu(menuDiv,width)
{
//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML; var rowObjs=pop.document.body.all[0].rows; //获得弹出菜单的行数
var rowCount=rowObjs.length; //循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
rowObjs[i].style.display=""; //设置鼠标滑入该行时的效果
rowObjs[i].cells[0].onmouseover=function()
{
this.style.background="#0080ff";
this.style.color="white";
} //设置鼠标滑出该行时的效果 rowObjs[i].cells[0].onmouseout=function()
{ this.style.background="#dcdcdc"; this.style.color="black";
}
}//end for //屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
} //选择右键菜单的一项后,菜单隐藏
pop.document.onclick=function()
{
pop.hide();
} //显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;
}<!--弹出式菜单项的回调函数-->
/*弹出式菜单项的回调函数*/function InsertRow()
{
tableObj.insertRow(RowID+1);
}function InsertCol()
{
for(var i=0;i<tableObj.rows.length;i++)
{
tableObj.rows[i].insertCell(ColID+1);
}
}function DelRow()
{
tableObj.deleteRow(RowID);
}function DelCol()
{
for(var i=0;i<tableObj.rows.length;i++)
{
tableObj.rows[i].deleteCell(ColID);
}
}</script>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertRow()">
插入一行
</td>parent对象是tr,tr没有insertRow函数,而且你的大小写也不对,下面的同理 </tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.InsertCol();">
插入一列
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelRow()">
删除该行
</td>
</tr> <tr>
<td style="font-size:13px;cursor:default;border:outset 1;" align="center" onclick="parent.DelCol()">
删除该列
</td>
</tr>
</table>
</div>
InsertRow及其它几个函数都确实被调用了,问题出在InsertRow函数内部。继续求教!
{
if(event.srcElement.tagName == "TD" || event.srcElement.tagName == "TH")
{
tableObj = event.srcElement.parentElement;
RowID = event.srcElement.parentElement.rowIndex;
ColID = event.srcElement.cellIndex;
popMenu(itemMenu,100);
event.returnValue=false;
event.cancelBubble=true;
}
else
{
event.returnValue=true;
event.cancelBubble=false;
}
return false;
}调试下看看全局变量是不是table对象,只有table对象才有insertRow()这个方法。
如果事件源为td,那么table对象应该是
event.srcElement.parentElement.parentElement.parentElement
td>tr>tbody>table
使用tableObj = event.srcElement.parentElement.parentElement.parentElement; 获得了成功!