1

ユーザー入力データによって生成されるテーブルを作成しようとしています。

テーブルはグリッドを反映しているため、各セルの ID をそのグリッドの座標にしたいと考えています。したがって、左下のセルの ID は id00 になります。右上のセル ID は、ユーザーが入力したグリッドの最大サイズになります。

たとえば、データが入力された場合。x 値 = 3; y 値 = 3 これにより、次の表が生成されます。

<table>
<tr><td id="id03"></td><td id="id13"></td><td id="id23"></td><td id="id33"></td></tr>
<tr><td id="id02"></td><td id="id12"></td><td id="id22"></td><td id="id32"></td></tr>    
<tr><td id="id01"></td><td id="id11"></td><td id="id21"></td><td id="id31"></td></tr>
<tr><td id="id00"></td><td id="id10"></td><td id="id20"></td><td id="id30"></td></tr>
</table>

以下に示すように、コードの基本的な概念を特定しました。

<table>
Create a loop,  initial value of r= 0; maximum value of r=y
r =0 <tr> create a secondary  loop, initial value of n=0; maximum value of n = x;  r remains  constant for row
n=0; r= 0 <td  id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
….
n=3; r= 0* <td id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
</tr>

….

r =3 <tr> n=0; r= 3 <td  id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
….
n=3; r= 3<td id = “id” + “[x- (x-n)]” +   “[y-r]” > </td>
</tr>
</table>

Javascript で開発したいのですが、この言語は初めてで、コーディングに問題があります。

誰でも提供できるヘルプは大歓迎です。

4

2 に答える 2

1

これを試して ：

var x = 3; // value from input
var y = 4; // value from input

var table = document.getElementById("myTable");
for(var i = 0; i < y; i++) {
    var row = table.insertRow(-1);
    for(var j = 0; j < x; j++) {
        var cell = row.insertCell(-1);
        cell.id = "id" + (j) + (y - i - 1);
        cell.innerHTML = cell.id;        
    }
}
​

実施例

于 2012-07-30T15:23:26.180 に答える
0

このようなことを試してください：

var rows = parseInt(document.getElementById('rows').value,10); // get input value
var cols = parseInt(document.getElementById('cols').value,10); // get input value
var table = document.createElement('table'); // create table element
table.border = "1"; // set some attributes
var prevrow; // used to store previous row element
for (var r = 0; r < (rows+1); r++) {  // loop rows
    var row = document.createElement('tr'); // create tr
    for (var c = 0; c < (cols+1); c++) { // loop cols
        var col = document.createElement('td'); // create td
        col.id = 'id' + r + c;  // set id of tr
        col.innerHTML = col.id; // add some text
        row.appendChild(col); // append td to tr
    }
    // if first tr then create append to table else insert before previous tr
    if (prevrow) {
        table.insertBefore(row, prevrow);
    } else {
        table.appendChild(row);
    }
    // store newly create tr
    prevrow = row;
}
// append the new table to the output div
document.getElementById('output').appendChild(table);

とを使用document.createElement()してテーブルを作成しますelement.appendChild()element.insertBefore()

作業例はこちら

于 2012-07-30T10:01:35.147 に答える