Java脚本功能适用于IE，但不适用于chrome和fire fox。它可以转换为Jquery吗？

Question

我有一张搜索结果表，如下图所示。如果我单击每行左上角的“+”，它会展开以显示另一个JSP，其中包含有关该行项目的更多详细信息。请注意，当我点击展开（+）符号时，它会变为折叠（ - ）符号。

此功能在IE中运行良好，但在Chrome或Firefox中无效。在chrome或FF中，+第一次单击时不会打开下拉列表。它第二次打开..但+不会改为 - 。因此，当我再次单击它时，它会打开另一个具有相同详细信息的下拉列表。不崩溃它。 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同样的东西。我仍然不清楚为什么。