2

Javascriptを使用して、ユーザー入力に基づいてテーブルを作成しようとしています（実際には、ユーザー入力に応じて2つまたは3つのテーブル..）。私はPHPに非常にネイティブであり、すでにPHPでこれを機能させていますが、ユーザークエリの前にテーブルを表示できるようにします。ここで、私が望んでいたことを部分的に実行するスクリプトを見つけて、それを編集しようとしました (驚くほど PHP に似ていることがわかりました)。ユーザーが複数のテーブルに分割して隣同士に配置したい場合に使用されるため、div タグが使用されます。ここに私のJSがあります：

<html>
<head>
<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
    var theader = '<div><table border="1">\n';
        for(u=1; u<=num_row; u++){
          tbody += '<tr>';
            for( var j=0; j<colStart; j++)
            {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
            }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>
</body>
</html>

PHP によって処理された後の最終出力は次のようになります (ports:24、col:6、rows:2、super:2)。

テーブル

ここに私が一緒に投げたjsフィドルがあります： http://jsfiddle.net/9SnLB/

現在、ボタンをクリックしても何も起こらないのですが、それが最初の問題だと思いますが、セットアップは正しく行われていますか? ボタンが機能を実行しないのはなぜですか?

4

3 に答える 3

1

jsFiddle フレームワークを「ラップなし (ヘッド)」に変更し、javascript のエラーを修正する必要があります。「ラップなし (ヘッド)」は、関数へのアクセスを許可します。「for ($u=1」ループには右中括弧がなく、$row は num_rows である必要があります。「for (j=0」ループには、最後の「tbody=」にセミコロンがありません。

これが修正されたjsです。

function createTable() {
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for (var i = 0; i < num_super; i++) {
    var theader = '<div><table border="1">\n';
    for ($u = 1; $u <= num_rows; $u++) {
        tbody += '<tr>';
        for (var j = 0; j < colStart; j++) {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>';
        }
    }
    tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

}

于 2013-01-28T03:04:14.787 に答える