您的位置：首页 > Web前端 > JavaScript

JS动态生成表格

2009-04-10 11:14 731 查看
<script type="text/javascript">   

        //全局变量   

        var i=0;   

        //添加行   

        function addMyRow(){   

            var mytable = document.getElementById("mybody");   

            var mytr = mytable.insertRow();   

             mytr.setAttribute("id","tr"+i);   

            var mytd_1=mytr.insertCell();   

            var mytd_2=mytr.insertCell();   

            var mytd_3=mytr.insertCell();   

            var mytd_4=mytr.insertCell();   

            var mytd_5=mytr.insertCell();   

             mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";   

             mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";   

             mytd_3.innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";   

             mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";   

             mytd_5.innerHTML="<input type='button' value='删除' onclick=/"delMyRow('"+i+"')/"/>";   

             i++;   

         }   

        //删除当前行   

        function delMyRow(j){   

            var mytable = document.getElementById("mybody");   

            var myrow = document.getElementById("tr"+j);   

             mytable.deleteRow(myrow.rowIndex-1);   

         }   

        //删除所有行   

        function delAllMyRow(){   

            var mytable = document.getElementById("mybody");   

            var rowlen=mytable.rows.length;   

            for(var i=rowlen-1;i>=0;i--){   

                 mytable.deleteRow(i);   

             }   

         }   

         </script>  

<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">  

        <table border="1">  

            <thead>  

                <tr bgcolor="red">  

                    <td align="center">  

                         姓名   

                    </td>  

                    <td align="center">  

                         性别   

                    </td>  

                    <td align="center">  

                         爱好   

                    </td>  

                    <td align="center">  

                         籍贯   

                    </td>  

                    <td align="center">  

                         操作   

                    </td>  

                </tr>  

            </thead>  

            <tbody id="mybody">  

               

            </tbody>  

        </table>  

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  input button function border table
相关文章推荐
新的分享
章节导航