JavaScript 动态操作表格

最新推荐文章于 2024-10-01 19:00:00 发布

zhangwenbo

最新推荐文章于 2024-10-01 19:00:00 发布

阅读量649

点赞数

文章标签： javascript button border

本文链接：https://blog.csdn.net/zhangwenbo/article/details/3207810

版权

 
 <html>
    <head>
        <title></title>
        <script language="javascript">
            function createTable(){
                var tbody=document.createElement("TBODY");//创建表格主体 
                roleTable.appendChild(tbody);//加入到表格中 
                
                row=document.createElement("TR");//添加行  
                row.align="center";//设置对齐方式 
                tbody.appendChild(row);
                
                emp_code=document.createElement("TD");//创建单元格 
                emp_code.innerHTML="单元格1";
                row.appendChild(emp_code);
                
                emp_code=document.createElement("TD");
                emp_code.innerHTML="单元格2";
                row.appendChild(emp_code);
                
                emp_code=document.createElement("TD");
                emp_code.innerHTML="单元格3";
                row.appendChild(emp_code);
                
                emp_code=document.createElement("TD");
                emp_code.innerHTML="单元格4";
                row.appendChild(emp_code);
                
                emp_code=document.createElement("TD");
                emp_code.innerHTML='<input name="button" type="button" οnclick="DeleteRow(this)" value="删除" />';
                row.appendChild(emp_code);
            }
            
            
            function DeleteRow(element){
                var tr=element.parentNode.parentNode;//先拿到按钮所在行，再拿到行所在的单元格 
                roleTable.deleteRow(tr.rowIndex);//删除行 
            }
        </script>
    </head>
    <body>
         <TABLE width="60%" border=1 cellSpacing=0 cellPadding=2 id="roleTable">
             <TBODY>
                <THEAD align="middle" bgColor="#ffcc00">
                    <TH title="列1">列1</TH>
                    <TH title="列2">列2</TH>
                    <TH title="列3">列3</TH>
                    <TH title="列4">列4</TH>
                    <TH title="列5">列5</TH>          
                </THEAD>
            </TBODY>
    </TABLE>
         <input name="button" type="button" οnclick="createTable()" value="click" />
    </body>
</html>
 