Javascript CSS绝对定位表格中的表格

我们有一个由（经典）ASP代码创建的表

当我们加载页面时，看起来是这样的。。。

当用户单击每条记录右侧的

Edit

按钮时，详细信息行变为可见

在IE中，它看起来像这样（这是我们想要的）：

不幸的是，在Firefox和其他浏览器（如Chrome）中，它看起来是这样的：

创建此文件的代码是服务器端ASP代码，如下所示：

'For record editing
.Write("<TR class='rowsummary2' style=""display:none;"" id=tr_Edit" & g_lngRowCount & ">")
.Write("<td></td>")
.Write("<td></td>")
.Write("<td></td>")

.Write("<td colspan=""2"" class=""filterback"">")
'.write("<div style=""position:relative;left:150px; display:none;"" id=div_Edit" & g_lngRowCount & ">")
.Write("<table cellspacing=""2px"" cellpadding=""2px"" width=""100%"" border=""0"">")
    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""left"" colspan=""2"">")
            .Write("<b>Edit ShPP</b>")
        .Write("</td>")
    .Write("</tr>")
    .Write("<tr>")
        .Write("<td align=""left"" width=""50%"">")
            .Write("<table width=""100%"" border=""0"" cellspacing=""2"" cellpadding=""2"">")                                   
                .Write("<tr>")
                    .Write("<td width=""20%"" class=""mandatory"">ShPP Amount Due</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3""><input type='text' class='inputbox' name='txtShPPAmountDue' " _
                        & " id=txtShPPAmountDue" & g_lngRowCount _
                        & " value="  & formatnumber(adoRs("ShPPPayment"), 2,,,False) _
                        & " style='width:75px' onKeyPress='javascript: validKeyPressTest(/[0-9,.]$/, event)'" _
                        & " onblur='javascript: frmShPP.txtShPPPayment.value = this.value;'" _
                        & " ></input>")
                    else
                        .Write("<td class=""summarytext"">" & formatnumber(adoRs("ShPPPayment"), 2,,,False) & "</td>")
                    End if
                .Write("</tr>")

                .Write("<tr>")
                    .Write("<td valign=""top"" width=""20%"" class=""mandatory"">Reason</td>")
                    if not Null2Bool(adoRs("IsPaid")) then
                        .Write("<td colspan=""3"" class=""summarytext""><textarea " _
                        & " id=txtComment" & g_lngRowCount _
                        & " name=""txtComment"">" & null2str(adoRs("Notes")) & _
                        "</textarea></td>")
                    else
                        .Write("<td colspan=""3"" class=""summarytext"">" & null2str(adoRs("Notes")) & "</td>")
                    End if
                .Write("</tr>")
            .Write("</table>")
        .Write("</td>")
    .Write("</tr>")

    .Write("<tr>")
        .Write("<td class=""summaryheader2"" align=""right"" colspan=""2"">")
            if not Null2Bool(adoRs("IsPaid")) then
                .Write "<input title='Save' ID='btnSave" _
                        & g_lngRowCount _
                        & "' type='button' name='btnSave" _
                        & g_lngRowCount _
                        & "' value='Save' onclick=""javasript:checkAndSubmit('updaterow', " _
                        & adoRs("Period") _
                        & ")"" class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39;' onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>&nbsp;&nbsp;&nbsp;"                           
            End if
            .Write "<input title='Cancel' ID='btnCancel" _
                    & g_lngRowCount _
                    & "' type='button' name='btnCancel" _
                    & g_lngRowCount _
                    & "' value='Cancel' onclick='javasript:CancelEdit(" _
                    & g_lngRowCount & ")' class='formbutton' onmouseover='this.className=&#39;formbuttonhover&#39; ' _onmouseout='this.className=&#39;formbutton&#39;' onfocus='this.className=&#39;formbuttonhover&#39;' onblur='this.className=&#39;formbutton&#39;'/>"                            
        .Write("</td>")
    .Write("</tr>")
.Write("</table>")
.Write("</td>") ' Filterback
.Write "</tr>"   

因此，对于每个记录，它都会创建一个隐藏的行，id类似于

tru Edit3

（对于记录3）以及

Edit

按钮的onclick事件。下面的javascript运行以显示/隐藏详细信息表：

function HideEditTable(rowNum, IsPaid) {        
    var iTotRows = document.getElementById("txtRowCount").value;
    for (i = 1; i <= iTotRows; i++) {
        document.getElementById("tr_Edit" + i).style.display = 'none';
        //document.getElementById("div_Edit" + i).style.display = 'none';           
    }
    
    document.getElementById("tr_Edit" + rowNum).style.display = 'block';
    //document.getElementById("div_Edit" + rowNum).style.display = 'block';
    if (IsPaid == 0) {
        frmShPP.txtShPPPayment.value = document.getElementById("txtShPPAmountDue" + rowNum).value;
        frmShPP.txtNotes.value = document.getElementById("txtComment" + rowNum).value;
        frmShPP.txtLumpsum.value = false; // default
    }
} 

<> P>那我怎么能让里面的表总是显示在中间？

谢谢

---

Philip

如果它只是表中的一行，那么您可以使用css将其定位并居中：

tr {
    text-align: center;
}

---

或者在td上尝试一下，为了让它正常工作，我们所要做的就是更改客户端javascript

这在FF/Chrome中不起作用：

document.getElementById("tr_Edit" + rowNum).style.display = 'block';

但当我们取出

块时，它会神奇地工作：

document.getElementById("tr_Edit" + rowNum).style.display = '';

哇，马上投反对票-至少告诉我，我添加了太多代码，解释得不够！这本质上是一个客户端解决方案。如果您使用view source并显示相关的输出代码，而不是生成它的服务器端代码，那么它可能会帮助js/css人员。（附言——否决票不是我投的）我完全不理解否决票。我发誓，有时候似乎有人会浏览所有asp经典问题，然后否决它们，仅仅因为他们可以。
document.getElementById("tr_Edit" + rowNum).style.display = 'block';

document.getElementById("tr_Edit" + rowNum).style.display = '';