2

テーブルリストの各会社名の横に[+]ボタンが付いた会社のテーブルリストがあります。ユーザーが [+] をクリックすると、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 関数の行を見てください: alert(x.length);

Firefox ではアラート 5 IE ではアラート 0

つまり、jquery ajax を使用してページに挿入された HTML 要素は IE ではアクセスできず、その理由はわかりません。ie に ajax パラメータを設定する必要がありますか?? わからない..助けてください。

た

4

2 に答える 2

2

IEに問題がありますgetElementsByName

あるいは、jQuery を使用してみませんか?

var x = $('*[name="rowafter'+s_cid+'"]'); //get all elements with name rowafterN
于 2012-06-13T10:34:43.930 に答える
1

getElementsByName()< IE9 では動作しません。jQuery を使用している場合は、attributeセレクターを使用します。

var x = $('[name="rowafter' + s_cid + '"]');
alert(x.length);
于 2012-06-13T10:35:12.197 に答える