0

基本的に、ユーザーは「高さ」変数を必要な行数に変更し、行の各 td に含まれる単語を格納し、コードでテーブルを生成する必要があります。

私のhtmlはこれだけです：

    <table id="newTable">
    </table>

これは私のJavascriptです：

<script type="text/javascript">
var height = 2; // user in this case would want 3 rows (height + 1)
var rowNumber = 0;

var height0 = ['HeadingOne', 'HeadingTwo']; // the words in each td in the first row
var height1 = ['firstTd of row', 'secondTd of row']; // the words in each td in the second row
var height2 = ['firstTd of other row', 'secondTd of other row']; // the words in each td in the third row

$(document).ready( function() {
    createTr();
});

function createTr () {
    for (var h=0; h<height + 1; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = "<tr id='rowNumber" + rowNumber + "'>"; // <tr id='rowNumber0'>
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
        for (var i=0; i<window['height' + rowNumber].length; i++) {
            if (i == window['height' + rowNumber].length-1) { // if i==2, then that means it is the last td in the tr, so have a </tr> at the end of it
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td></tr>";
                $('#rowNumber' + rowNumber).append(theTr); // append to the end of the Tr

            } else {
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td>";
                $('#rowNumber' + rowNumber).append(theTr);
            }
        }
        rowNumber += 1;
    }
}
</script>

私は「アラート（theTr）;」をしました および「アラート(theTd);」そしてそれらは正しく見えました。このコードでテーブルが生成されないのはなぜですか?

4

2 に答える 2

2

行を変更する必要があります

$('#rowNumber' + rowNumber).append(theTr);

の中へ

$('#rowNumber' + rowNumber).append(theTd);

内側のループで Tr コードを再度追加していますが、実際には Td コードを追加したかったのです。

于 2013-10-28T15:16:51.630 に答える
1

そのようなことはすべて、window["height"+rowNumber]それを行うには貧弱な方法です。配列を使用し、それをパラメーターとして関数に渡して、グローバル変数を使用しないようにします。文字列を追加する代わりに、jQuery DOM 作成関数を使用します。

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>

JSFIDDLE

于 2013-10-28T15:24:49.533 に答える