2

我有一个搜索结果表，如下图所示。如果我单击每行左下角的“+”，它会展开以显示另一个 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 识别为同一事物。我仍然不清楚为什么。

4

0 回答 0