0

我认为我的问题对于 js 专家来说很简单（我是 js 的初学者）。

在我的脚本中，我动态创建了一个表。在 html 代码中，我有一个按钮，当您单击此按钮时，我希望所有表格单元格都填充一些颜色。我有一个单独的函数来填充表格单元格，但我遇到的问题是，当我单击按钮时，只有表格的最后一个单元格被填充。我认为这个问题与闭包有关，因为表单元格是在循环内创建的。

这是代码：

HTML：

<button onclick='show()'>Click</button>

JS：

var obj = new Object;

    obj.x = document.createElement('table');
    document.body.appendChild(obj.x);

        for(i=0;i<10;i++){
            obj.y = document.createElement('tr');
            obj.x.appendChild(obj.y);

                for(j=0;j<10;j++){
                    obj.z = document.createElement('td');
                    obj.z.appendChild(document.createTextNode(j));
                    obj.y.appendChild(obj.z);
                }
            }

    function fill(){

        obj.z.style.backgroundColor='red';

    }

//-->

4

1 回答 1

0

每次 for 循环迭代时，obj.z 都会被一个新的覆盖，这意味着只会引用最后一个单元格。设置表格中所有单元格样式的一种更简单的方法是非常简单地更改backgroundColor其<table>本身。

如果您想以另一种方式执行此操作，则需要单独循环遍历单元格元素，并随时设置每个元素的样式。更简单的方法是使用jQuery，向值添加一个className属性（例如theTable在本例中）并使用以下代码：

$('table.theTable td').css('backgroundColor','red');

这将选择<td>具有类的表中的所有元素theTable（它使用 CSS 选择器），并将它们的backgroundColorCSS 属性设置为red.

于 2012-05-29T09:03:52.000 回答