<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> 测试动态添加表格 </TITLE> <style type="text/css"> <!-- body { font-size: 11px; background:#000; font-family:Verdana, Geneva, sans-serif; } .trHead { background:#00004f; height:22px; color:#FFF; font-weight:normal; border-top:1px solid #000c74; border-right:1px solid #003; border-bottom:1px solid #003; border-left:1px solid #000c74; padding:0 5px;} .line { background:#444; height:22px; border-top:1px solid #555; border-right:1px solid #333; border-bottom:1px solid #333; border-left:1px solid #555; color:#FFF;} --> </style> <script type="text/javascript"> /** * 表格动态添加行 * 花非花雾非雾 2009-12-03 * * divId: 表格所在层的id * content:要添加行的html代码 */ function addRow(divId,content){ var srcDiv = eval("document.getElementById('"+ divId +"')"); //获取表格所在的div var temp = srcDiv.innerHTML; //获取div内部的innerHTML //设置div新的innerHTML,内容为:div旧innerHTML除掉最后的'</table>' + 新内容 + '</table>' temp = temp.substr(0,(temp.lastIndexOf('</TR>')+5)) + content + '</table>'; srcDiv.innerHTML=temp; } function add(){ content = '<tr class="line" align="center">'+ '<td οnclick="delRow(this)">删除</td><td>花花</td><td>23</td><td>安徽</td>'+ '</tr>'; addRow('test',content) } function delRow(v){ v.parentNode.parentNode.removeChild(v.parentNode); } </script> </HEAD> <BODY> <div id='test' align="center"> <br><br><br><br><br><br><br><br> <table border="1" width="30%"> <tr class="trHead" align="center"> <td οnclick="add()">添加</td><td>姓名</td><td>年龄</td><td>籍贯</td> </tr> </table> </div> </BODY> </HTML>