2

これらの 3 つのスペースが最初は空白であるとします。JavaScriptでinnerHTMLを使って変更したい。

<p id="topname"></p>
<div id="table"></div> 
<p id="botname"></p>

document.getElementById("topname").innerHTML = "Boy"; 
document.getElementById("botname").innerHTML = "Girl";

innerHTML で topname と botname を変更することができました。x by y (2x2、4x4、8x8 など) テーブルを表示するようにdiv id="table"を変更するにはどうすればよいですか?

4

3 に答える 3

2

を に置き換える代わりに、の子ノードとしてを作成することをお勧めします<div>(パディングやマージンなど) に追加のスタイルを追加していない限り、これは表示に影響しません。<table><table><div><div>

構築するためのいくつかのループが<tr>あり<td>、仕事をします。x と y を取る関数は次のとおりです。

function makeTable(rows, cols) {
  // Create a table node
  var tbl = document.createElement('table');
  // Make a <tr> for each row
  for (var i=0; i<rows; i++) {
    var tr = document.createElement('tr');
    // And make a <td> for eah col
    for (var j=0; j<cols; j++) {
      var td = document.createElement('td');
      // Append them to the current tr
      tr.appendChild(td);
    }
    // Append the row
    tbl.appendChild(tr);
  }
  return tbl;
}

// Create a new 2x4 table with the function
var newTable =  makeTable(2, 4);
// And append it as a child to the <div id='table'>
document.getElementById('table').appendChild(newTable);

こちらが活躍中です

于 2012-11-05T12:25:34.520 に答える
0

同じようにできるはずですが、その div id が問題を引き起こしている可能性があります。TABLE は、それ自体が html エンティティです。私はそれを改名します。

document.getElementById("table").innerHTML = "<table><caption>Caption</caption><thead>Table Header</thead><tfoot>Table Footer</tfoot><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table>";

そして、Shadow Wizard が上で言ったこと。仕事に適したツールを使用するのが最善です。私の答えは、div内でそれを行うことを主張する場合のみです。

于 2012-11-05T12:24:27.327 に答える
0

まずdiv、table手動で次のように変更します。

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

次のコードを使用するtableと、行と列を入力できます。

document.getElementById("table").appendChild(makeTable(2, 4));

function makeTable(rows, cols) {

    var table = document.createDocumentFragment(), tr = document.createElement("tr"), td = document.createElement("td"), i, j;

    for(j = 0; j < cols; j++) tr.appenChild(td.cloneNode(true));

    for(i = 0; i < rows; i++) table.appendChild(tr.cloneNode(true));

    return table;

}
于 2012-11-05T13:21:12.903 に答える