1

我在尝试使用 JavaScript 动态更改表格单元格的样式类时遇到问题。

以下问题发生在FF上，我也在其他浏览器上打开了该页面，并且运行良好。

我有一个包含 4x4 表格的 html 页面。当我单击一个单元格时，我想将其放大，当我再次单击它时将其缩小。我定义了 2 个 CSS 类，一个用于正常大小的单元格，一个用于缩放单元格。单击单元格时，我正在使用 JS 更改 CSS 类。

FF 的问题是，当从 zoomClass 更改为 normalClass 时，单击的单元格右侧的所有单元格都向右移动......

我找不到此问题的解决方案或解决方法，如果有人有任何想法，请在此处发布。

接下来，我将附上html、css和js文件。

谢谢 ：）

util.js


function zoom(id) {

    if (document.getElementById(id).className == "zoomClass") {

        document.getElementById(id).className = "normalClass";

    } else {

        document.getElementById(id).className="zoomClass";

    }

}

calendar.css


table, td, th, tr {
    border-color:#D2D3D4;
    border-style:solid;
    border-width:2px;
}

#main_table {
    border-spacing:1px;
    height:450px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:30px;
    width:850px;
}

td.normalClass {
    padding:0;
    font-size:4px;
    color:#3333FF;
}

td.zoomClass {
    display:inline;
    position:absolute;
    width:320px;
    height:240px;
    z-index:100;
    font-size:18px;
}

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" />
    <script type="text/javascript" src="js/util.js"></script>
</head>

<body>
<div>
    <div>
        <table id="main_table">
            <tr>
                <td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"></td>
                <td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"></td>
                <td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"></td>
                <td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"></td>
                <td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"></td>
                <td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"></td>
                <td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"></td>
                <td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"></td>
                <td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"></td>
                <td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"></td>
            </tr>
            <tr>
                <td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"></td>
                <td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"></td>
                <td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"></td>
                <td id="17" onclick="zoom(17)" align="right" valign="top"     class="normalClass"></td>
            </tr>
        </table>
    </div>
</body>

</html>
4

3 回答 3

1

这就是表格的工作方式。我可能会尝试使用 div 做同样的事情，然后您应该能够使用 position:absolute 处理问题，这样扩展的 div 将覆盖其他 div。这对于表格单元格可能同样有效。

于 2009-12-10T10:20:11.433 回答
1

不幸的是，“位置”不适用于表格单元格。您可以尝试在表格单元格中放置一个 div 并定位它。

编辑：这样的事情应该可以解决问题：

td.normalClass div { 
    display: none; 
} 
td.zoomClass div { 
    display: block; 
    position: absolute; 
    width: 320px; 
    height: 240px; 
}

确保div是 中的第一件事，td它将位于td左上角。td如果您需要进一步更改顶部和左侧的值，您可能需要使用相对定位。

于 2009-12-10T10:33:19.307 回答
1

如果可以的话，对您的代码发表一些评论。我会将布局保留在 CSS 文件中而不是 HTML 中，因此我将删除所有这些 align="right" 和 valign="top"。此外，您可以更有效地引用表格中的单元格。这样您就不必为每个单元格设置类。

#main_table td{
    padding:0;
    font-size:4px;
    color:#3333FF;
}

我还将页面的所有行为保存在单独的脚本文件（Javascript）中。因此，每个单元格不再有 onclick="zoom(x)" 。您可以使用事件绑定来做到这一点。

此外，如果您使用事件绑定，您可以只“读取”单击单元格的 id，因此您不必在调用缩放函数时静态传递该值。

最后：我强烈推荐使用 jQuery 来进行这种 DOM 操作，因为它更容易，代码更短且更具可读性，并且您的脚本几乎可以跨浏览器运行。

我没有针对这个特定问题的解决方案，但是使用 jQuery 很容易插入一个新的 DOM 元素，例如一个 div，其中包含单击单元格的内容，浮动在表格上并模拟缩放效果。该 div 将是绝对可定位的，并且可以比用户单击的单元格更好地设置样式。

于 2009-12-10T11:09:56.127 回答