js碰到IE和谷歌兼容性问题

zklfire37 2013-10-29 02:08:16

这是js代码
function addYY(element){
var tag = element.parentNode;
var tagP = document.createElement("p");
var yyInput = document.createElement("input");
var butInput = document.createElement("input");
yyInput.setAttribute("type","text");
yyInput.setAttribute("name","yyCheck");
yyInput.setAttribute("maxlength","128");
yyInput.setAttribute("size","60");
butInput.setAttribute("type","button");
butInput.setAttribute("value","删除");
butInput.setAttribute("onclick","removeYY(this)");
tagP.appendChild(yyInput);
tagP.appendChild(butInput);
tag.appendChild(tagP);
element.remove;
tag.appendChild(element);
}

function removeYY(element){
var tag = element.parentNode;
if(confirm("确定删除此条原因？")){
tag.remove();
}
}

html页面代码:
<tr>
<td width="70" align="left" style="padding-left: 5">
原因：
</td>

<td align="left" style="padding-left: 5" bgcolor="#FFFFFF">
<logic:iterate id="ary" name="yyArray">
<%-- <html:text property="${ary}" maxlength="128" size="50"/> --%>
<p>
<input type="text" name="yyCheck" value="${ary}" maxlength="128" size="60"/>
<input type="button" value="删除" onclick="removeYY(this)"/>
<font class="needColor" >*</font><br/>
</p>

</logic:iterate>
<input type="button" value="增加" onclick="addYY(this)"/>
</td>
</tr>

现情况是这样的：在谷歌浏览器下，我按下增加的按钮后，会增加一个输入框和删除按钮，如图

，然后点击删除按钮，可删除刚增加的输入框。
可是在IE浏览器下，只会实现增加功能，但是点击删除按钮时无效的，我用调试工具看了下，IE下并没有出现此标签。。求前端大神高手帮忙解决..

...全文

546 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

zklfire37 2013-10-31

打赏
举报

[quote=引用 9 楼 ziyu529 的回复:] 主要是新加的input ，点击一下，调用不到removeYY();里面只写了alert

ziyu529 2013-10-31

打赏
举报


function removeYY(obj){
	var row = obj.parentNode.parentNode; 
	var tb = row.parentNode; //当前表格
	var rowIndex = row.rowIndex;
	if(tb.rows.length>1){
		tb.deleteRow(rowIndex);
}

zklfire37 2013-10-31

打赏
举报

[quote=引用 6 楼 wcnm007 的回复:] 没成功，而且removeYY都没被调用到

zklfire37 2013-10-31

打赏
举报

[quote=引用 11 楼 whatisma 的回复:] 可以了，十分感谢！

zklfire37 2013-10-31

打赏
举报

[quote=引用 11 楼 whatisma 的回复:] 按你的改了下，还是差不多情况，chrome下可以删掉，IE下不可以。但是removeYY()是触发了，但是element传进来的却是object

whatisma 2013-10-31

打赏
举报

引用 2 楼 zklfire37 的回复:

晕，这个弄错了，不过我刚把这行给去掉了，还是没用

本质就是你的tag.remove();这行代码不兼容问题。改为：


function removeYY(element) {
                var tag = element.parentNode;
                if (confirm("确定删除此条原因？")) {
                    tag.parentNode.removeChild(tag);
                }
            }

这种动态添加我一般用这个方法：


<td>
                <p id="pTemp" style="display: none;">
                    <input  type="text" name="yyCheck"  maxlength="128" size="60"/>
                    <input  type="button" value="删除" onclick="removeYY(this)"/>
                </p>
                <p>
                    <input  type="text" name="yyCheck"  maxlength="128" size="60"/>
                    <input  type="button" value="删除" onclick="removeYY(this)"/>
                </p>
                <input  type="button" value="增加" onclick="addYY(this)"/>
                </td>

然后addYY方法：


function addYY(element) {
                var p1=document.getElementById("pTemp");
                var newP=p1.cloneNode(true);
                p1.parentNode.insertBefore(newP,element);
                newP.style.display="";
            }

这样好处是减少js代码量，并且样式什么的都可以事先控制好。缺点就是保存时候需要忽略隐藏那个模板元素。