关于表格操作遇到的郁闷的问题
事件失效
可能是有概念没搞清楚
希望大家指点
<!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 " />
<title> 无标题文档 </title>
<script>
window.onload=function() {
var tab=document.createElement( "table ");
tab.border=1;
var row=document.createElement( "tr ");
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick= "alert( 'aaaa ') ";
input.value= "aaaa ";
cell.appendChild(input);
row.appendChild(cell);
tab.appendChild(row);
document.getElementById( "grid ").innerHTML=tab.outerHTML;
//为什么这样不行 document.getElementById( "grid ").appendChild(tab);
}
function add() {
var tab=document.getElementById( "grid ").children[0];
var row=tab.insertRow();
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick= "alert( 'bbbb ') ";
input.value= "bbbb ";
cell.appendChild(input);
row.appendChild(cell);
//为什么添加一行后alert()没有效果
}
</script>
</head>
<body>
<div id= "grid "> </div>
<input type= "button " name= "Submit " value= "添加 " onclick= "add() "/>
</body>
</html>
[解决办法]
var tbody = document.createElement( "TBODY ");
tbody.appendChild(row);
tab.appendChild(tbody);
document.getElementById( "grid ").appendChild(tab);
[解决办法]
<!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 " />
<title> 无标题文档 </title>
<script>
window.onload=function() {
var tab=document.createElement( "table ");
mytablebody = document.createElement( "tbody ");
tab.border=1;
var row=document.createElement( "tr ");
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick=function(){alert( 'aaaa ');}
input.value= "aaaa ";
cell.appendChild(input);
row.appendChild(cell);
mytablebody.appendChild(row);
tab.appendChild(mytablebody);
document.getElementById( "grid ").appendChild(tab);
}
function add() {
var tab=document.getElementById( "grid ").children[0];
var row=tab.insertRow();
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick=function(){alert( 'bbbb ');}
input.value= "bbbb ";
cell.appendChild(input);
row.appendChild(cell);
//为什么添加一行后alert()没有效果
}
</script>
</head>
<body>
<div id= "grid "> </div>
<input type= "button " name= "Submit " value= "添加 " onclick= "add() "/>
</body>
</html>
[解决办法]
另外 input.onclick= "alert( 'aaaa ') "; 点击时不会有效果
应该 input.onclick=function(){alert( "aaaa ");}
[解决办法]
FOR IE,FF:
<!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 " />
<title> 无标题文档 </title>
<script>
window.onload = function(){
var tab=document.createElement( "table ");
tab.border=1;
var tbd=document.createElement( "tbody ");
var row=document.createElement( "tr ");
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick= "alert( 'aaaa ') ";
input.value= "aaaa ";
cell.appendChild(input);
row.appendChild(cell);
tbd.appendChild(row);
tab.appendChild(tbd);
document.getElementById( "grid ").appendChild(tab);
}
function add(){
var tab=document.getElementById( "grid ").childNodes[0];
var row=tab.insertRow(tab.rows.length);
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick= "alert( 'bbbb ') ";
input.value= "bbbb ";
cell.appendChild(input);
row.appendChild(cell);
}
</script>
</head>
<body>
<div id= "grid "> </div>
<input type= "button " name= "Submit " value= "添加 " onclick= "add() "/>
</body>
</html>
[解决办法]
关于onclick alert，请参考gzdiablo() :
input.onclick=function(){alert( "aaaa ");}
[解决办法]
<!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 " />
<title> 无标题文档 </title>
<script>
window.onload=function() {
var tab=document.createElement( "table ");
tab.border=1;
var row=document.createElement( "tr ");
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick= "alert( 'aaaa ') ";
input.value= "aaaa ";
cell.appendChild(input);
row.appendChild(cell);
tab.appendChild(row);
document.getElementById( "grid ").innerHTML=tab.outerHTML;
}
function add() {
var tab=document.getElementById( "grid ").children[0];
var row=tab.insertRow();
var cell=document.createElement( "td ");
var input=document.createElement( "input ");
input.onclick=function(){alert( 'bbbb ');};
input.value= "bbbb ";
cell.appendChild(input);
row.appendChild(cell);
//为什么添加一行后alert()没有效果
}
</script>
</head>
<body>
<div id= "grid "> </div>
<input type= "button " name= "Submit " value= "添加 " onclick= "add() "/>
</body>
</html>
