Question

我在尝试使用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>

Answer 1

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

Answer 2

不幸的是，“位置”对表格单元格不起作用。您可以尝试在表格单元格中放置一个div并进行定位。

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

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

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

Answer 3

如果可能，请对您的代码进行一些评论。我会将布局保留在CSS文件中而不是HTML中，所以我将删除所有这些对齐=“正确”和valign =“顶部”。此外，您可以更有效地引用表格中的单元格。然后，您不必为每个单元格设置类。

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

我还会将页面的所有行为保存在单独的脚本文件（Javascript）中。所以在每个单元格上不再有onclick =“zoom（x）”。您可以使用事件绑定来执行此操作。

此外，如果您使用事件绑定，您只需“读取”所单击单元格的ID，这样您就不必在调用缩放功能时静态传递该值。

最后：我强烈建议使用jQuery来执行这种DOM操作，因为它更容易，代码更短，更易读，并且您的脚本可以在浏览器中运行，非常开箱即用。

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

使用js动态更改css类

3 个答案: