javascript - Java スクリプト機能は IE では機能しますが、chrome と fire fox では機能しません。Jqueryに変換できますか？

Question

下の画像に示すように、検索結果の表があります。各行の左隅にある「+」をクリックすると、行が展開されて別の JSP が表示され、明細項目に関する詳細が表示されます。展開 (+) 記号をクリックすると、折りたたみ (-) 記号に変わることに注意してください。

この機能は IE では正常に機能しますが、Chrome や Firefox では機能しません。chrome または FF では、最初にクリックしたときに + がドロップダウン テーブルを開きません。2回目に開きます..しかし、+は-に変わりません。その結果、もう一度クリックすると、同じ詳細を持つ別のドロップダウン テーブルが開きます。崩れません。Belwo は私のテーブルが表示される方法であり、この機能を達成するために訴える Java スクリプトです。これがブラウザによって異なる理由と、すべてのブラウザで同じように動作させる方法を提案してください。また、Javascript から Jquery へのコンバーターがオンラインにあるかどうかも確認したいと思いました。

<display:column headerClass="tableHead" title=" " style="text-align:center" media="html"> <img class="expand" alt="" src="images/plus.jpg" onclick="toggleHawbInfo(this.parentNode.parentNode);" />
        </display:column>

それがコラムです。以下はjavascriptです。

function toggleHawbInfo(theRow) {
    var tbl = document.getElementById('hawbTable');
    if (toggleTree(theRow) == "expand") {
        getHawbInfo(theRow);
        workingHAWBID = theRow.rowIndex;
    } else {
        deleteChild(tbl, theRow);
        workingHAWBID = null;
    }
}

function toggleTree(theRow) {
    var imgEl = theRow.cells[0].firstChild;
    if (imgEl.className == "expand") {
        imgEl.className = "collapse";
        imgEl.src = "images/minus.jpg";
        return "expand";
    } else {
        imgEl.className = "expand";
        imgEl.src = "images/plus.jpg";
        return "collapse";
    }
}


function getHawbInfo(theRow) {    
    var tbl = document.getElementById('hawbTable');
    var hawb = theRow.cells[1].innerHTML;
    var customer = document.getElementsByName("customer")[0].value;
    var prodType = document.getElementsByName("product")[0].value;
    var grChecked = document.getElementById('hawb_' + hawb).checked;
    insIndex = theRow.rowIndex + 1;
    var hawbRow = tbl.insertRow(insIndex);
    hawbRow.insertCell(0); //spacer
    var hawbCol = hawbRow.insertCell(1);
    hawbRow.level = "child";
    hawbCol.colSpan = "16";
    //hawbCol.innerHTML = '<iframe style="width:99%;height:120px;" name ="hawbDocDtls" scrolling="no" frameborder="1" src="HawbSearchDtlAction.do?hawb='+ hawb +'" ></iframe>';
    hawbCol.innerHTML = "<table width='100%'>" +
        "<tr><td><iframe style='width:100%;height:125px;border:solid 1px #000;' frameborder='0' id = " + hawb +
        " name='hawbDocDtls' src ='HawbSearchDtlAction.do?hawb=" + hawb + "&custId=" + customer + "&prodType=" + prodType +
        "&grChecked=" + grChecked + "' scrolling='auto' ></iframe></td></tr>" +
        "</table>";
}

function deleteFrame(theRow) {
    var tbl = document.getElementById('hawbTable');
    theRow.cells[1].innerHTML = "<img class='expand' alt='See Package Detail'     src='images/plus.jpg' onclick='expandFrame(this.parentNode.parentNode);' />";
    tbl.deleteRow(theRow.nextSibling.rowIndex);
}

function deleteChild(tbl, row) {
    //try this var tbl = row.parentNode;
    if (row.nextSibling != null && row.nextSibling.level == "child") {
        tbl.deleteRow(row.nextSibling.rowIndex);
    }
}

jsfiddle.net/mblase75/XMEpq

これが役立つかどうか教えてください。多くのデバッグの後、IE と FF が theRow.cells[0].firstChild、theRow.cells[0].firstChild.className、theRow.cells[0].firstChild.src を同じものとして認識しないことがわかりました。なぜなのかはまだはっきりしていませんが。