问题在代码的注释中...<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>
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>
解决方案 »
- highcharts的图表问题
- firefox如何实现window.close(),前提不能设置firefox的config~
- Java触发器的问题
- 表单嵌套 JS 提交 问题
- js做的日期联动 -- 到下个页面时,点击ie后退时回来如何保存以前的值
- 怎样在用JS修改HTML中加载的XML文件名称?
- []firefox 中执行 innerHTML 很怪的问题
- 关于AJAX XML XSLT的问题--AJAX IN ACTION里的例子也存在同样的问题,不知道怎么解决
- 求助:关于下拉菜单
- ■■请教:页面中<table>中的行颜色的改变,我使用document.all.tbl.rows[1].bgcolor="#ECF2EC",但是没有效果啊,请看■■
- 表单的验证
- js正则表达式达人请进~~问题咨询
return function(){
alert(obj.innerHTML)
tr.removeChild(obj)
}
})(td)
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相当于未定义
td.onclick = function() {
//事件中的this就是指向的绑定了该事件的DOM对象啊,LZ为什么要那样写
this.parentNode.removeChild(this);
}
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>