ExtJS4使用DomHelper在表格插入多行HTML时的bug（IE浏览器下）-CSDN博客

本文链接：https://blog.csdn.net/gogo1217/article/details/84264161

ExtJS4用了一段时间了，最近在做表格的单元格上点击鼠标，动态在下面插入多行数据时，发现IE下不正确。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/static/ext4/resources/css/ext-all.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/ext4/ext-all.js"></script>
<script type="text/javascript">
	Ext.Loader.setConfig({
		enabled : true,
		disableCaching : false
	});
	insert = function(tr) {
		Ext.DomHelper.insertAfter(tr,'<tr><td>第一行插入的数据</td></tr>'+
                  '<tr><td>第二行插入的数据</td></tr>'+
                  '<tr><td>第三行插入的数据</td></tr>');
	}
</script>
</head>
<body>
	<table border="1">
		<tr>
			<td><a οnclick="insert(this.parentNode.parentNode)">点击我插入一行数据</a></td>
		</tr>
	</table>
</body>
</html>

在IE中点击第一行数据，只会插入第二行数据，而第一行数据会被忽略，第三行以及后续的行数据均被忽略。

跟踪ExtJS的源码，可以看到最终进行DOM操作的代码为Ext.dom.HelperView中的ieTable方法。

ieTable: function(depth, openingTags, htmlContent, closingTags){
        detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');

        var i = -1,
            el = detachedDiv,
            ns;

        while (++i < depth) {
            el = el.firstChild;
        }
        // If the result is multiple siblings, then encapsulate them into one fragment.
        ns = el.nextSibling; 

        if (ns) {
            el = document.createDocumentFragment();
            while (ns) {
                el.appendChild(ns);//此处有问题，没有追加第一个元素，而是直接追加的第二个元素



                ns = ns.nextSibling;//此处有问题，追加后,ns的后续子节点关联已经断开



            }
        }
        return el;
    }

修改办法：

Ext.dom.Helper.prototype.ieTable = function(depth, openingTags, htmlContent, closingTags){
		   var detachedDiv=document.createElement('div');//由于闭包 ，无法访问顶部定义的变量



		   detachedDiv.innerHTML = [openingTags, htmlContent, closingTags].join('');
		    
		   var i = -1,
           el = detachedDiv,
           ns,nx;

       while (++i < depth) {
           el = el.firstChild;
       }
       // If the result is multiple siblings, then encapsulate them into one fragment.
       if (el.nextSibling) {
    	   nx=ns=el;
           el = document.createDocumentFragment();
           while (ns) {
               nx=ns.nextSibling;//保证能获取到后续元素



               el.appendChild(ns);//保证插入第一个元素



               ns=nx;
           }
       }
       return el;
   };