***************js删除td的问题*******************

Question

问题在代码的注释中...<script type="text/javascript">
        function Puzzle(size){
            this.size=size;
            this.Init.call(this);
        }
        Puzzle.prototype={
            Init:function(){
                var table = document.createElement("table");
                var tbody = document.createElement("tbody");
                table.appendChild(tbody);
                for(var i=0;i<this.size;i++){
                    var tr = document.createElement("tr");
                    for(var j=0;j<this.size;j++){
                        if((i+1)*(j+1)!=this.size*this.size){
                            var td = document.createElement("td");
                            td.innerHTML=i*this.size+j+1;
                            tr.appendChild(td);
                            td.onclick=(function(obj){
//这里点击td的时候删除该td，为什么一直提示参数无效？哪里有问题呢？
                                return function(){
                                    tr.removeChild(obj)
                                }
                            })(td)
                        }
                    }
                    tbody.appendChild(tr);
                }
                var div = document.getElementById("puzzle");
                div.appendChild(table);
            }
        }
        window.onload=function(){
            var puzzle = new Puzzle(4);
        }
    </script>

Answer 1

有找到啊，这样弹得出来的。                            td.onclick=(function(obj){
                                return function(){
                                    alert(obj.innerHTML)
                                    tr.removeChild(obj)
                                }
                            })(td)

Answer 2

obj是个什么东东明显找不到。

Answer 3

= =怎么都没看到我后面有赋给obj参数= =#

Answer 4

function Puzzle(size){
            this.size=size;
            this.Init.call(this);
        }
        Puzzle.prototype={
            Init:function(){
                var table = document.createElement("table");
                var tbody = document.createElement("tbody");
                table.appendChild(tbody);
                for(var i=0;i<this.size;i++){
                    var tr = document.createElement("tr");
                    for(var j=0;j<this.size;j++){
                        if((i+1)*(j+1)!=this.size*this.size){
                            var td = document.createElement("td");
                            td.innerHTML=i*this.size+j+1;
                            tr.appendChild(td);
                            td.onclick=(function(obj,tr){
//这里点击td的时候删除该td，为什么一直提示参数无效？哪里有问题呢？
                                return function(){
                                    tr.removeChild(obj);
                                }
                            })(td,tr);
                        }
                    }
                    tbody.appendChild(tr);
                }
                var div = document.getElementById("puzzle");
                div.appendChild(table);
            }
        }
        window.onload=function(){
            var puzzle = new Puzzle(4);
        }这样试试~
你创建了一个执行环境，给执行环境中的obj作为td的拷贝，但是tr这里并没有进行拷贝，所以在这个执行环境中tr相当于未定义

Answer 5

不懂，是不是我理解错了...
td.onclick = function() {
    //事件中的this就是指向的绑定了该事件的DOM对象啊，LZ为什么要那样写
    this.parentNode.removeChild(this);
}

Answer 6

其实你写的这段代码结构上还是比较清晰的，很不错的代码，在你没有理清这段代码的执行过程。当Init方法执行完，在你所写的这段代码中 td.onclick=(function(obj){
                                return function(){
                                    tr.removeChild(obj)
                                }
                            })(td)
tr是最后一行，你可以发现你点击删除最后一行是正常的，但是点击前三行的单元格是无法删除的，因为你根本无法从第四行中删除前三行中的单元格，以下是我在你的代码中稍作的修改，可能会帮助你
<script type="text/javascript">        function Puzzle(size)
{
            this.size=size;
            this.Init.call(this);
        }
        
Puzzle.prototype = 
{
            Init:function()
{
                var table = document.createElement("table");
table.border = "1px";
                var tbody = document.createElement("tbody");
                table.appendChild(tbody);
                for(var i=0;i<this.size;i++)
{
                    var tr = document.createElement("tr");
tr.id = i;
                    for(var j=0;j<this.size;j++)
{
                        if((i+1)*(j+1)<= this.size*this.size)
{
                            var td = document.createElement("td");
                            td.innerHTML = i*this.size + j + 1;
                            tr.appendChild(td);
td.onclick = (function(obj)
{
return function()
{
this.parentNode.removeChild(this);                                    
}
})(td);
                        }

                    }
                    tbody.appendChild(tr);
                }
                var div = document.getElementById("puzzle");
                div.appendChild(table);
            }
        }
        window.onload=function()
{
            var puzzle = new Puzzle(4);
        }
    </script>

Answer 7

顶，我也没看懂，估计是建了个闭包在点击td click事件的时候删除的是当前的td吧，但是用this不就可以了