为table添加行和列

  1＜html xmlns="http://www.w3.org/1999/xhtml" ＞
  2＜head runat="server"＞
  3    ＜title＞AddRow＜/title＞
  4    ＜style type="text/css"＞
  5        .BlackBorder{ background-color:#000; font-size:12px;}
  6        .BlackBorder tr{ background-color:#fff;}
  7    ＜/style＞
  8＜/head＞
  9＜body＞
 10    ＜form id="form1" runat="server"＞
 11    ＜div＞
 12        ＜table width="400px"＞
 13            ＜tr＞
 14                ＜td＞
 15                    姓名：
 16                    ＜input id="txtName" style="100px;" /＞  
 17                    年龄：
 18                    ＜input id="txtAge" style="50px;"  /＞  
 19                    ＜input id="txtAdd" type="button" value="新增" onclick="return insertRow()"/＞
 20                ＜/td＞
 21            ＜/tr＞
 22            ＜tr＞
 23                ＜td＞
 24                    ＜table id="tMemInfo" width="100%" class="BlackBorder" cellpadding="0" cellspacing="1" border="0" style="padding-left:5px;"＞
 25                        ＜tr style=" background-color:#E0E0E0;"＞
 26                            ＜td style="150px;"＞
 27                                姓名
 28                            ＜/td＞
 29                            ＜td style="100px;"＞
 30                                年龄
 31                            ＜/td＞
 32                            ＜td＞
 33                                管理
 34                            ＜/td＞
 35                        ＜/tr＞
 36                    ＜/table＞
 37                ＜/td＞
 38            ＜/tr＞
 39        ＜/table＞
 40        
 41    ＜/div＞
 42    ＜/form＞
 43    
 44＜script type="text/javascript"＞
 45
 46function insertRow()
 47{
 48    
 49    var name=document.getElementById("txtName").value;
 50    var age=document.getElementById("txtAge").value;
 51    
 52    if(name=="")
 53    {
 54        alert("請填寫姓名");
 55        document.getElementById("txtName").focus();
 56        return false;
 57    }
 58    if(age=="")
 59    {
 60        alert("請填寫年龄");
 61        document.getElementById("txtAge").focus();
 62        return false;
 63    }
 64
 65    var myTable=document.getElementById("tMemInfo");
 66    var objRow = myTable.insertRow(1); 
 67    var objCell = objRow.insertCell(0);  
 68    objCell.innerHTML= "＜input type='text' style='100px;' style='display:none'/＞＜span ＞"+name+"＜/span＞";
 69    var objCell = objRow.insertCell(1); 
 70    objCell.innerHTML="＜input type='text' style='50px;'  style='display:none'/＞＜span ＞"+age+"＜/span＞";
 71    var objCell = objRow.insertCell(2);
 72    objCell.innerHTML=" ＜input type='button' value='取消' onclick='cancel()' style='display:none'/＞ "+
 73                      " ＜input type='button' value='儲存' onclick='save()' style='display:none'/＞" +
 74                      " ＜input type='button' value='修改' onclick='edit()'  /＞" +
 75                      " ＜input type='button' value='删除' onclick='deleteRow()' /＞";
 76                      
 77    document.getElementById("txtName").value="";
 78    document.getElementById("txtAge").value="";
 79    document.getElementById("txtName").focus();
 80}
 81
 82//删除行
 83function deleteRow()
 84{
 85    var myTable=document.getElementById("tMemInfo");
 86    var trList =myTable.getElementsByTagName("tr");
 87    var row = 0;
 88    for(var i = 0; i ＜ trList.length ; i++)
 89    {
 90        if(event.srcElement.parentNode.parentNode == trList[i])
 91            row = i;
 92    }
 93    myTable.deleteRow(row);
 94}
 95
 96function cancel()
 97{
 98    var e=event.srcElement.parentElement.parentElement;
 99    e.childNodes[0].childNodes[0].style.display="none";
100    e.childNodes[0].childNodes[1].style.display="";
101    e.childNodes[1].childNodes[0].style.display="none";
102    e.childNodes[1].childNodes[1].style.display="";
103    e.childNodes[2].childNodes[0].style.display="none";
104    e.childNodes[2].childNodes[2].style.display="none";
105    e.childNodes[2].childNodes[4].style.display="";
106    e.childNodes[2].childNodes[6].style.display="";
107    
108}
109
110function save()
111{
112    var e=event.srcElement.parentElement.parentElement;
113    e.childNodes[0].childNodes[0].style.display="none";
114    e.childNodes[0].childNodes[1].style.display="";
115    e.childNodes[1].childNodes[0].style.display="none";
116    e.childNodes[1].childNodes[1].style.display="";
117    e.childNodes[2].childNodes[0].style.display="none";
118    e.childNodes[2].childNodes[2].style.display="none";
119    e.childNodes[2].childNodes[4].style.display="";
120    e.childNodes[2].childNodes[6].style.display="";
121    e.childNodes[0].childNodes[1].innerHTML=e.childNodes[0].childNodes[0].value;
122    e.childNodes[1].childNodes[1].innerHTML=e.childNodes[1].childNodes[0].value;
123}
124
125function edit()
126{
127    var e=event.srcElement.parentElement.parentElement;
128    e.childNodes[0].childNodes[0].style.display="";
129    e.childNodes[0].childNodes[1].style.display="none";
130    e.childNodes[1].childNodes[0].style.display="";
131    e.childNodes[1].childNodes[1].style.display="none";
132    e.childNodes[2].childNodes[0].style.display="";
133    e.childNodes[2].childNodes[2].style.display="";
134    e.childNodes[2].childNodes[4].style.display="none";
135    e.childNodes[2].childNodes[6].style.display="none";
136    e.childNodes[0].childNodes[0].value=e.childNodes[0].childNodes[1].innerHTML;
137    e.childNodes[1].childNodes[0].value=e.childNodes[1].childNodes[1].innerHTML;
138}
139＜/script＞
140＜/body＞
141＜/html＞
142