<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
?<HEAD>
? <TITLE> New Document </TITLE>
? <META NAME="Generator" CONTENT="EditPlus">
? <META NAME="Author" CONTENT="">
? <META NAME="Keywords" CONTENT="">
? <META NAME="Description" CONTENT="">
?<style type="text/css">
table {
?border: 1px solid #9999cc;
?color: red;
}
td {
?font-family:Arial, Helvetica, sans-serif, 宋体;
?font-size: 12px;
?color: red;
?cursor:default;
}
input.readonly {
?padding-right: 1px;
?padding-left: 1px;
?padding-bottom: 2px;
?padding-top: 2px;
?border: 1px solid #9999cc;
?background: #efefef;
}
.textinput {
?border: 1px solid #9999cc;
?background:#FFFFCC;
?line-height: 16px;
?font-size: 12px;
}
?</style>
?</HEAD>
?<BODY>
? <TABLE id="mytable">
? <TR>
?<TD><input type="text" name="name" value="11111111" readonly="true"/></TD>
?<TD><input type="text" name="name" value="11111111"/></TD>
?<TD><input type="text" name="name" value="11111111"/></TD>
?<TD><input type="text" name="name" value="11111111"/></TD>
?<TD><input type="text" name="name" value="11111111"/></TD>
? </TR>
? <TR>
?<TD><input type="text" name="name" value="22222222"/></TD>
?<TD><input type="text" name="name" value="22222222"/></TD>
?<TD><input type="text" name="name" value="22222222"/></TD>
?<TD><input type="text" name="name" value="22222222"/></TD>
?<TD><input type="text" name="name" value="22222222"/></TD>
? </TR>
? <TR>
?<TD><input type="text" name="name" value="33333333"/></TD>
?<TD><input type="text" name="name" value="33333333"/></TD>
?<TD><input type="text" name="name" value="33333333"/></TD>
?<TD><input type="text" name="name" value="33333333"/></TD>
?<TD><input type="text" name="name" value="33333333"/></TD>
? </TR>
? <TR>
?<TD><input type="text" name="name" value="44444444"/></TD>
?<TD><input type="text" name="name" value="44444444"/></TD>
?<TD><input type="text" name="name" value="44444444"/></TD>
?<TD><input type="text" name="name" value="44444444"/></TD>
?<TD><input type="text" name="name" value="44444444"/></TD>
? </TR>
? </TABLE><br>
? <TABLE id="mytable2"></TABLE>
?</BODY>
? <script type="text/javascript">
?var tds = document.getElementsByTagName("td");
?var trs = document.getElementsByTagName("tr");
?var tab2 = document.getElementById("mytable2");
?var tdlen = tds.length;
?var trlen = trs.length;
?for(var i=0;i<tdlen;i++){
??//tds[i].onclick=tdClick;
?}
?for(var i=0;i<trlen;i++){
??trs[i].onclick=trClick;
??trs[i].onclick.x = i+1;
??//alert(trs[i].onclick);
?}
?function tdClick(str){
??var tab22 = document.getElementById("mytable2");
??var t2body = tab22.children[0];
??t2body.apendChildren(this.parentNode);
?}
?function trClick(){
?alert(arguments.callee.x);
??var tab22 = document.getElementById("mytable2");
??var t2body = tab22.children[0];
??
??var copyFlag = checkRowExit(tab22,this.rowIndex);
??//alert(copyFlag);
??if(copyFlag){
???var row = tab22.insertRow(tab22.rows.length);
???var tds = this.cells;
???var tdl = this.cells.length;
???for(var i=0; i<tdl; i++){
????var td = document.createElement("td");
????td.innerHTML = tds[i].innerHTML;
????row.appendChild(td);
????row.id = this.rowIndex;
????row.ondblclick = trOndblclick;
???}
???if(row.rowIndex%2==0){
????row.bgColor = "red";
???}else{
????row.bgColor = "green";
???}
??}
?}
?function checkRowExit(tableObj, rowId){
??var trs = tableObj.rows;
??var trl = trs.length;
??for(var i=0; i<trl; i++){
???if(trs[i].id == rowId){
????return false;
???}
??}
??return true;
?}
?function trOndblclick(){
??var rowIndex = this.rowIndex;
??var table = this.parentNode.parentNode;
??table.deleteRow(rowIndex);
?}
? </script>
</HTML>
=====================================================================
<html >?
<body>?
?
<p>111</p>?
<p>222</p>?
<p>333</p>?
<p>444</p>?
<p>555</p>?
?
</body>?
</html>?
?
?
?
<script type="text/javascript">?
var p = document.getElementsByTagName("p");??
var len = p.length;??
function fn1(){??
??? for(var i=0; i<len; i++){??
??????? p[i].setAttribute("x",i+1);??
??????? p[i].onclick = function(){??
??????????? alert(this.getAttribute("x"));??
??????? };??
??? }??
}??
//fn1();??
?
function fn2(){??
??? for(var i=0; i<len; i++){??????
??????? p[i].onclick = function(){??
??????????? alert(arguments.callee.x);??
??????? }??
??????? p[i].onclick.x = i+1;??
??????? //or??
??????? /*??
??????? (p[i].onclick = function(){??
??????????? alert(arguments.call.x);??
??????? }).x = i+1;??
??????? */??
??? }??
}??
//fn2();??
// ----------------- 以上是保存变量在对象中。??
?
?
function fn3(){??
??? for(var i=0; i<len; i++){??
??????? p[i].onclick = (function(x){????
??????????? var y = i+1;??
??????????? return function(){?? //返回一个闭包，引用了来自外层的变量??
??????????????? alert(x);??????? // 参数形式??
??????????????? alert(y);??????? // 变量形式,外层函数执行可以不带参数.??
??????????? };??
??????? })(i+1);??
??? }??
}??
//fn3();??
?
function fn4(){??
??? for(var i=0; i<len; i++){??
??????? (function(x){???????????????? //利用自执行的匿名函数激发作用域。体会和fn3的区别。??
??????????? var y = i+1;????????????? //fn3和fn4同样是闭包，不过fn3是在函数外引用闭包，fn4是在函数内引用闭包。??
??????????? p[i].onclick = function(){??
??????????????? alert(x);??
??????????????? alert(y);??
??????????? }??
??????? })(i+1);??
??? }??
}??
//fn4();??
// ----------------------以上变量保存在闭包中??
?
function fn5(){??
??? for(var i=0; i<len; i++){??????????????
??????? var str = "alert("+(i+1)+")";????? //利用new Function声明函数。??
??????? p[i].onclick = new Function(str);? //这种方法相当于对每一个p[i]单独声明了一个构造好的函数.??
??? }??
}??
fn5();??
?
//总结??
/*??
??? fn5的效率无疑是最差的，因为new Function的问题，所以不建议使用。??
??? fn3,fn4利用闭包的特性，分别在内存中持久了每一个i的变量。这里可以帮助理解闭包的作用。??
??? fn1,fn2将变量保存在对象上，效率最高，对于大量的绑定建议使用。??
*/??
?
</script>?
?