-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 に答える