0

画像セルを含むテーブルを作成するためのJavaScript関数があります。

    function Draw(array) {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];
        document.clear();

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        tbl.setAttribute("borderstyle", "1");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 4; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 4; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createElement(array[4 * j + i]);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }

しかしで

var cellText = document.createElement(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);

動作しcell.appendChild(cellText);ません！理由もわからないし、解決方法もわからない！

配列の更新 は次のとおりです。

    var a = Array(16);
    for (var i = 0; i < 16; i++) {
        a[i] = '<img src="' + i + '.jpg" />';
    }
4

2 に答える 2

1

更新された回答

コメントを再確認してください。

テキストを入れるだけです。それは私が画像ではなくテキストを見ていることを意味します<img src ...！

マークアップarray[4 * j + i]が含まれていることを教えていただければ便利でした（たとえば、質問にその例が含まれていました）。

配列にマークアップが含まれている場合は、いかなる種類の新しいノードも作成しないでください。innerHTML代わりに、テーブルセルのに割り当てます。

cell.innerHTML = array[4 * j + i];
row.appendChild(cell);

に割り当てるとinnerHTML、ブラウザはマークアップを解析し、関連するコンテンツを要素に追加します。

以下のコメントの前とarrayの内容が与えられる前の元の答え：

テキストノードを作成するにはcreateTextNode、ではなく、を使用しますcreateElement。それで：

// Change here ---------v
var cellText = document.createTextNode(array[4 * j + i]);
cell.appendChild(cellText);
row.appendChild(cell);

array[4 * j + i]だったとしましょう"Hi there"。あなたのdocument.createElement(array[4 * j + i])呼び出しは、DOMにタグ名の要素を作成するように要求していました。これは、タグ名の要素を作成するように要求するHi thereのとまったく同じ方法です。document.createElement('div')div

于 2012-05-13T07:10:32.137 に答える
1

完全を期すために、innerHTML プロパティの代わりに appendChild() を使用したい場合は、受け入れられた解決策の他の代替案を次に示します。

あなたもできたはずです

var a = Array(16);
for (var i = 0; i < 16; i++) {
    a[i] = document.createElement('img');
    a[i].setAttribute('src', i + '.jpg');
}

そしてそれもうまくいったでしょう。また、Image オブジェクトを作成することもできます。

var a = Array(16);
for (var i = 0; i < 16; i++) {
    a[i] = new Image();
    a[i].src = i + '.jpg';
}

そして appendChild はまだ機能しているはずです。

jQuery などの JavaScript フレームワークとその機能を使用することは、使用可能な別の完全に異なるアプローチです。ただし、それには、あなたが持っているコードを書き直す必要があります。

于 2012-05-13T07:45:49.407 に答える