Question

我有一个公司的表格列表，在我的表格列表中每个公司名称旁边都有一个[+]按钮。当用户单击[+]时，javascript函数使用jquery ajax获取并在单击的行下方追加一个新的表行，然后显示一个缩进的部门列表。

一切都很好..直到我们到达我们心爱的IE。我正在使用IE 8，而不是在普通版本上试过这个。

点击前的表格项目HTML：

<tr id="row1">
<td align="center">
<div id="button1" class="on" onclick="javascript:expandDepartments(1)"></div>
</td>
<td>Company 1</td>
</tr>

onClick功能：

    <script>
    function expandDepartments(s_cid) {
        if ($('#button'+s_cid+'').hasClass('on')) {
            $('#button'+s_cid+'').removeClass('on').addClass('off');
            if ( document.getElementsByName('rowafter'+s_cid+'').length == 0) { //if the department list does not exist for this company (first time getting departments)

                $.ajax({
                    type: 'POST',
                    url: 'ajax/common.php',
                    dataType: 'html',
                    data: 'a=getHomePageDepartments&cid='+s_cid+'',
                    success: function(txt){
                        setTimeout(function(){
                            $('#homeCompaniesList tbody').find('#row'+s_cid+'').after(txt);
                        },1000);
                    }
                });

            }else{ //otherwise, just re-show the row again, no need to request it again

                setTimeout(function(){
                    var x = document.getElementsByName('rowafter'+s_cid+'');
                    for(var k=0;k<x.length;k++)
                        x[k].style.display = '';
                    },1000);

            }

        } else if ( $('#button'+s_cid+'').hasClass('off') ) { //hide the row when MINUS image clicked

            $('#button'+s_cid+'').removeClass('off').addClass('on');
            var x = document.getElementsByName('rowafter'+s_cid+'');
            alert(x.length);
            for(var k=0;k<x.length;k++)
                x[k].style.display = 'none';

        }
    }
</script>

包含多个部门的公司的HTML输出：

<tr style="display:;" name="rowafter1"><*td data not important*..
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">
<tr style="display:;" name="rowafter1">

现在，看看javascript函数，行：警报（x.length）;

在Firefox中，它会提醒5 在IE中，它会提醒0

这告诉我，使用jquery ajax注入页面的HTML元素在IE中无法访问，我不知道为什么。我是否需要为ie设置ajax参数？不确定..请协助。

TA

Answer 1

IE有an issue with getElementsByName

或者，为什么不使用jQuery？

var x = $('*[name="rowafter'+s_cid+'"]'); //get all elements with name rowafterN

Answer 2

getElementsByName()无法在＆lt; IE9。如果您使用的是jQuery，请使用attribute选择器：

var x = $('[name="rowafter' + s_cid + '"]');
alert(x.length);

在Jquery Ajax IE之后访问getElementsByName数组

2 个答案: