紧急求救，javascript动态添加表格问题！

<html>
<head>
    <title>无标题页</title>
    <script type="text/javascript">var mytable=null,mytable2=null;window.onload=function(){
mytable=new CTable("tbl",1);
}Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)}function $A(arrayLike){
for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]);
return ret
}Function.prototype.bind = function() {
   var __method = this, args = $A(arguments), object = args.shift();
   return function() {
     return __method.apply(object, args.concat($A(arguments)));
   }
}
function CTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id; 
if (rows && /^\d+$/.test(rows)) this.addrows(rows)
}CTable.prototype={
addrows:function(n){           //随机添加n个tr
new Array(n).each(this.add.bind(this))
},
add:function(){           //添加1个tr
var self=this;
var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1);
var chkbox=document.createElement("INPUT")
chkbox.type="checkbox"
chkbox.onclick=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute("width","35")
td2.innerHTML="<input name=\"textfield16\" type=\"text\" class=\"batchform\">";//td2.innerHTML=Math.ceil(Math.random()*99)
},
del:function(){           //删除所选tr
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){               //上移所选tr
var self=this
var upOne=function(tr){           //上移1个tr
if (tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])
self.getChkBox(tr).checked=true
}
}
var arr=$A(self.tbl.rows).reverse()
if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()           
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)});
},
down:function(){
var self=this
var downOne=function(tr){      
if (tr.rowIndex<self.tbl.rows.length-1)   {
self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);
self.getChkBox(tr).checked=true;
}
}
var arr=$A(self.tbl.rows)if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){
for(var i=arr.length-1;i>=0;i--){
if (self.getChkBox(arr[i]).checked){
arr.pop()
}else{
break
}
}
}
arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)});
},
highlight:function(){               //设置tr的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){             //交换tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;
var tBody=tr1.parentNode
tBody.replaceChild(tr2,tr1);
     tBody.insertBefore(tr1,target);
},
getChkBox:function(tr){           //从tr得到 checkbox对象
return tr.cells[0].firstChild
},
restoreBgColor:function(tr){          
tr.style.backgroundColor="#ffffff" 
},
setBgColor:function(tr){
tr.style.backgroundColor="#c0c0c0"
}
}function f(a,b){
var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};
return sumRow(a)>sumRow(b)?1:-1;
}
</script>
    
</head>
<body>
           <button   onClick="javascript:mytable.add()">添加一行</button>
           <button   onClick="javascript:mytable.del()">删除选定行</button>
           <button   onClick="javascript:mytable.up()">上移选定行</button>
           <button   onClick="javascript:mytable.down()">下移选定行</button>
           <br/><br/>            <table border="1px" id="tbl" width="100%"> 
            </table>
</body>
</html>注：想要实现这样的效果点添加行，后面的textbox换成一个table，但是js不会动态添加了，请高手指点迷津，谢谢了！
<table class="tablestrs" style="width: 37%; height: 83px; background:pink"><tr><td class="style2"> 教程地址：</td><td> &nbsp;<input id="addr" class="text" type="text" /></td></tr><tr><td class="style2"> &nbsp;标题：</td><td>&nbsp;<input id="title" class="text" type="text" /></td></tr> <tr><td class="style2">&nbsp;内容：</td><td> &nbsp;<input id="content" class="text" type="text" /></td> </tr></table>
实现后的界面是这样！<!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=gb2312" />
<title>无标题文档</title>
</head><body>
                                            <button   onclick="javascript:mytable.add()">添加一行</button>
                                             <button   onclick="javascript:mytable.del()">删除选定行</button>
                                             <button   onclick="javascript:mytable.up()">上移选定行</button>
                                            <button   onclick="javascript:mytable.down()">下移选定行</button>
<table border="1" width="100%">
<tr>
<td width="35px">
<input type="checkbox" width="30px" />
</td>
<td>
 <table class="tablestrs" style="width: 37%; height: 83px; background:pink"><tr><td class="style2"> 教程地址：</td><td> &nbsp;<input id="addr" class="text" type="text" /></td></tr><tr><td class="style2"> &nbsp;标题：</td><td>&nbsp;<input id="title" class="text" type="text" /></td></tr> <tr><td class="style2">&nbsp;内容：</td><td> &nbsp;<input id="content" class="text" type="text" /></td> </tr></table>
</td></tr></table>
</body>
</html>

解决方案 »

  1.   

    add:function(){ //添加1个tr
    var self=this;
    var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1);
    var chkbox=document.createElement("INPUT")
    chkbox.type="checkbox"
    chkbox.onclick=self.highlight.bind(self)
    td1.appendChild(chkbox)
    td1.setAttribute("width","35")
    td2.innerHTML="<input name=\"textfield16\" type=\"text\" class=\"batchform\">";//td2.innerHTML=Math.ceil(Math.random()*99)
    },这个函数是添加行的，你究竟要添加什么子控件啊？没看明白你的意思
      

  2.   


    td2.innerHTML="<input name=\"textfield16\" type=\"text\" class=\"batchform\">";这行是添加一个textbox，我想把他换成
    <table class="tablestrs" style="width: 37%; height: 83px; background:pink"><tr><td class="style2"> 教程地址：</td><td> &nbsp;<input id="addr" class="text" type="text" /></td></tr><tr><td class="style2"> &nbsp;标题：</td><td>&nbsp;<input id="title" class="text" type="text" /></td></tr> <tr><td class="style2">&nbsp;内容：</td><td> &nbsp;<input id="content" class="text" type="text" /></td> </tr></table>把这表格添加进去！
      

  3.   

    有点小麻烦，LZ用jquery搞的话，会简单很多
      

  4.   


    jquery我是不行啊，你能不能帮忙实现一下！
      

  5.   

    看你写的代码，javascript基础还不错，研究二个小时jqueryAPI，就能上手了哈
      

  6.   

    td2.innerHTML="<input name=\"textfield16\" type=\"text\" class=\"batchform\">";
    换成
    td2.innerHTML='<table class="tablestrs" style="width: 37%; height: 83px; background: pink"> <tr> <td class="style2"> 教程地址： </td> <td> &nbsp; <input id="addr" class="text" type="text" /></td></tr><tr><td class="style2">&nbsp;标题：</td><td>&nbsp;<input id="title" class="text" type="text" /></td></tr><tr><td class="style2">&nbsp;内容：</td><td>&nbsp;<input id="content" class="text" type="text" /></td></tr></table>';