Question

我认为我的问题对于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';

    }

// - ＆GT;

Answer 1

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

如果你想以另一种方式做到这一点，你需要单独循环遍历单元格元素，并随着每个单元格设置样式。更简单的方法是使用jQuery，在值中添加className属性（例如本示例中的theTable）并使用以下代码：

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

这将选择表<td>（它使用CSS选择器）的表中的所有theTable元素，并将其backgroundColor CSS属性设置为red。

动态创建表

1 个答案: