如何在javascript中创建动态行和列

时间:2013-07-04 12:00:10

标签: javascript

我想在按钮上使用javascript创建一个表。如果我已经创建了3rows和4列,那么如果我想在该表中再添加一行和列,那么我有资格在不创建新的情况下执行此操作表。 任何人都可以帮助我...... 这是我用于此事的代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <meta http-equiv="Content-Style-Type" content="text/css">
                <meta http-equiv="Content-Script-Type" content="text/javascript">
                    <style type="text/css">
                        .mytable {
                            border:1px solid #000000;
                            border-collapse:collapse;
                            width:500px;
                        }
                        .mytable td{
                            background:#cccccc;
                            border:1px solid #000000;
                        }
                        </style>
                    <script type="text/javascript">
                        function  CreateTable(){
                            var x,y;
                            var maxCols=100
                            var nrCols=maxCols +1;
                            var maxRows=100;
                            var nrRows=maxRows+1;
                            while(nrRows>maxRows){
                                nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
                            }

                            while(nrCols>maxCols){
                                nrCols=Number(prompt('How many rows? Maximum '+maxCols+' allowed.',''));
                            }
                            var root=document.getElementById('mydiv');
                            var tab=document.createElement('table');
                            tab.className="mytable";
                            var tbo=document.createElement('tbody');
                            var row, cell;
                            for(var i=0;i<nrRows;i++){
                                row=document.createElement('tr');
                                //                                    for(var p=0;p<nrCols;p++)
                                //                                    {
                                //                                       nrCols =document.createElement('tr');
                                //                                    }
                                for(var j=0;j<nrCols;j++){
                                    cell=document.createElement('td');
                                    cell.appendChild(document.createTextNode(i+' '+j))
                                    row.appendChild(cell);
                                }
                                tbo.appendChild(row);
                            }
                            tab.appendChild(tbo);
                            root.appendChild(tab);
                        }
                        </script>
                    </head>
    <body>
        <div id="mydiv" spellcheck="true" contenteditable="true" style="font-family: Helvetica"> </div>
    </body>
</html>

如果有人能做的话请帮助......

0 个答案:

没有答案