-3

我遇到了麻烦下表应该在表中的每个框中读取 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>
4

1 回答 1

0

正如 gdoron 所说，您需要问一个问题，但我会赌一把，猜您希望您修复代码。

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

  • 输入框没有ID
  • 否 " 用于 HTML 表单中项目的值
  • .insertRow 缺少参数
  • .insertCell 缺少参数
  • 如果您输入数字 1，validNumber 函数会产生错误。
  • 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>

于 2013-01-27T09:22:33.590 回答