动态创建表格，实现编辑 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 表格处理 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
    <button onclick="addrow()">增加一行</button>
    <button onclick="delrow()">删除一行</button>

    <table id="mytable" onclick="selrow()"></table>

    
 </BODY>

 <SCRIPT LANGUAGE="JavaScript">
   
   function addrow(){
       var tb= document.all.mytable; 
       alert(td);

       //加属性
       tb.border=5;
       tb.width="50%";

       var row=tb.insertRow();  //新加一行
       var td=row.insertCell();  //格子  td
       td.innerHTML="hello";
       td=row.insertCell();  //格子  td
       td.innerHTML="world";

   }

   //选 行
   var tr;  //存你选中的一行
   function selrow(){
     var obj= event.srcElement;  //你点的对象
     if(obj.tagName=="TD"){
        tr= obj.parentNode;  //找父亲  就是 tr
        tr.bgColor="#FF00CC";

        //让它的内容能修改
        var value=obj.innerText;  //表格中的值
        obj.innerHTML="<INPUT onblur='changeTd(this)'  TYPE='text' value='"+value+"'>";
      
     }
   }

   //删除 
   function delrow(){
     if (tr!=null)
     {     
      var tb= document.all.mytable;
      alert(tb.rows.length);
      tb.deleteRow( tr.rowIndex );
      }
   }

   //修改格子的值 
   function  changeTd(wbk){
      var t=wbk.value;  //存好文本框的值
      var td= wbk.parentNode;  //td
      td.innerHTML=t;
   }

 </SCRIPT>
</HTML>

 

posted @ 2012-10-20 18:18  邹晟  阅读(290)  评论(0)  编辑  收藏  举报