Question

我遇到问题，下表应该读取表格中每个框中的r1 c1，r1 c2，r2 c1，r2 c2等，用户应该只能选择最多12行12列应显示错误消息。到目前为止，这是我的代码。

<!DOCTYPE html>

        <!-- written by Angela Bauer on 1/23/2013-->
        <!-- saved from url=(0014)about:internet -->


       <html>
         <head>
           <meta charset = "utf-8">
           <title> Dynamic Table </title>
             <script type = "text/javascript">


             var width = 500;
             var height = 500;

            function CreateTable(txtRows, txtCols, hold)
            {
            if(validNumber(txtRows) && validNumber(txtCols)
            && (hold != null) && (hold.canHaveChildren))
            {
            hold.innerHTML = "";
            var table = document.createElement("table");
            table.border = 3;
            table.borderColor = "Blue";
            table.height = height;
            table.width = width;
            var row = null;
            var cell = null;
            hold.appendChild(table);
            for(i=0; i<txtRows; i++)
            {
            row = appendR(table)
            for(j=0; j<txtCols; j++)
            {
            cell = appendC(row);
            cell.innerText = j;
            cell = null;
            }
            row = null;
            }
            }
            }

            function appendR(table)
            {
            if(table != null)
            {
            return table.insertRow();
            }
            else
            {
            alert("Error while creating table. Cause: Container Table is null!");
            }
            }

            function appendC(aRow)
            {
            if(aRow != null)
            {
            return aRow.insertCell();
            }
            else
            {
            alert("Error while creating table. Cause: Container row is null!");
            }
            }

            function validNumber(ipNum)
            {
            if(isNaN(ipNum))
            {
            alert("Invalid Number!");
            return false;
            }
            else if(ipNum <= 1)
            {
            alert("You can only enter a number from 1 - 12!");
            return false;
            }
            else
            {
            return true;
            }
            }
             </script>
        </head>
            <body>
            <table>
            <tr>
                <td> How many Rows would you like: </td>
                <td><input type=text name=txtRows value=1 /></td>
            </tr>
            <tr>
                <td> How many Columns would you like: </td>
                <td><input type=text name=txtCols value=1 /> </td>
            </tr>
            <tr>
                <td colspan=10 align=right><input type=button name=cmdCreate value="Create Table" 
                onClick="CreateTable(txtRows.value, txtCols.value, divHolder)" /></td>
            </tr>
            </table>
                <div id=divHolder></div>
            </body>
       </html>

Answer 1

正如gdoron所说，你需要提出一个问题，但是我正在试试并猜测你希望修改代码。

以下是您的代码的工作副本。有很多错误，包括

输入框上没有ID
否“用于HTML表单中的项目值
.insertRow缺少参数
.insertCell缺少参数
如果输入了，则validNumber函数产生错误 1号。
canHaveChildren仅在IE中有效我已删除它但是如果你的脚本将在IE中使用，然后将其添加回来

最佳做法应避免的事情：使用单词table，row等作为var名称。

我猜你的新东西，所以我的建议是安装Firefox和firebug添加，因为它会告诉你一半的错误。此外，如果它没有做你想做的事情，那么就可以在代码的各个部分添加警报，并找出它到达或不到达的位置。

希望这会让你走上正轨。

<html>
<head>
    <meta charset = "utf-8">
    <title> Dynamic Table </title>
    <script type = "text/javascript">
        var width = 500;
        var height = 500;
        function createTable(txtRows, txtCols, hold) {
//                alert (txtRows+", "+txtCols+", "+hold);
//                alert (hold.canHaveChildren);
//                Removed as its an IE only javascript ----    && (hold.canHaveChildren)
            if(validNumber(txtRows) && validNumber(txtCols) && (hold != null) ) {
//                    alert ("is valid");
                hold.innerHTML = "";
                var table1 = document.createElement("table");
                table1.border = 3;
                table1.borderColor = "Blue";
                table1.height = height;
                table1.width = width;
                var row1 = null;
                var cell1 = null;
                hold.appendChild(table1);
                for(i=0; i<txtRows; i++) {
 //                        alert ("first for");
                    row1 = appendR(table1, i);
                    for(j=0; j<txtCols; j++) {
 //                            alert ("second for");
                        cell1 = appendC(row1, j);
                        cell1.innerText = j;
                        cell1 = null;
                    }
                    row1 = null;
                }
            }
        }

        function appendR(table1, i) {
            if(table1 != null) {
                return table1.insertRow(i);
            } else {
                alert("Error while creating table. Cause: Container Table is null!");
            }
        }

        function appendC(aRow, j) {
            if(aRow != null) {
                return aRow.insertCell(j);
            } else {
                alert("Error while creating table. Cause: Container row is null!");
            }
        }

        function validNumber(ipNum) {
            if(isNaN(ipNum)) {
                alert("Invalid Number!");
                return false;
            } else if(ipNum > 12) {
                alert("You can only enter a number from 1 - 12!");
                return false;
            } else if(ipNum < 1) {
                alert("You can only enter a number from 1 - 12!");
                return false;
            } else {
                return true;
            }
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td> How many Rows would you like: </td>
            <td><input id="txtRows" type="text" name="txtRows" value="1" /></td>
        </tr>
        <tr>
            <td> How many Columns would you like: </td>
            <td><input id="txtCols" type="text" name="txtCols" value="1" /> </td>
        </tr>
        <tr>
            <td colspan=10 align=right><input type=button name=cmdCreate value="Create Table" 
                                              onClick="createTable(txtRows.value, txtCols.value, divHolder)" /></td>
        </tr>
    </table>
    <div id="divHolder"></div>
</body>

Javascript动态表

1 个答案: