[JS] Tabel met 3 kolommen genereren

[Reveller]

Ik probeer een stukje javascript te schrijven dat een x aantal items in een tabel zet met y aantal kolommen, bijvoorbeeld:

code:

3 kolommen:

+---+---+---+
| 0 | 1 | 2 |
+---+---+---+
| 3 | 4 | 5 |
+---+---+---+
| 6 | 7 | 8 |
+---+---+---+
| 9 |
+---+

4 kolommen:

+---+---+---+---+
| 0 | 1 | 2 | 3 |
+---+---+---+---+
| 4 | 5 | 6 | 7 |
+---+---+---+---+
| 8 | 9 |
+---+---+

Ik heb nu dit:

JavaScript:

str = '<table border="1">';

for (i = 0; i < 10; i ++)
{
  if (i % 2) str = str + '<tr>';
  str = str + '<td>' + i +'</td>';
  if (i % 2) str = str + '</tr>';
}
str = str + '</table>';
document.write(str);

Ik probeer hier een tabel met twee kolommen te maken, maar de output is niet wat ik verwacht: een tabel met 1 kolom en 10 rijen. Ik zit er nu al een hele tijd op, maar kom niet verder. Wie helpt mij op weg? Dan kan ik het daarna zelf verder proberen

[André]

Ga eens zoeken op createElement zodat je via het DOM elementen kan toevoegen.

En anders:

code:

x = 3;
y = 5;

str = '<table border="1">';

for (var i = 0; i < y; i++)
{
  str = str + '<tr>';
  for (var j = 0; j < x; j++)  
  {
    str = str + '<td>' + j + (j * i) +'</td>';
  }
  str = str + '</tr>';
}
str = str + '</table>';
document.write(str);

Uit de losse pols.

[ Voor 68% gewijzigd door André op 14-09-2004 17:28 ]

[Verwijderd]

Net ff snel gefabriseerd

Java:

function createTable(arInput, iWidth)
{
    var sOutput = '<table>';

    for(var i = 0; (i * iWidth) < arInput.length; i++)
    {
        sOutput += "<tr>";
        for(var j = 0 ; j  < iWidth; j++)
        {
            if(j < arInput.length)
                sOutput += "<td>"+arInput[i*iWidth+j]+"</td>";
            else
                sOutput += "<td></td>";
        }
        sOutput += "</tr>";
    }

    sOutput += "</table>";
    return sOutput;
}

[ Voor 64% gewijzigd door Verwijderd op 14-09-2004 17:28 . Reden: kleine typo ]

[Reveller]

Java:

var characterList = new Array(
    "£", "€", "©", "®", "±", 
    "·", "¼", "½", "¾",
    "Ä", "ä", "Ë", "ë", "Ü", 
    "ü", "Ï", "ï", "Ö", "ö",
    "§", "ç");

function createTable(arInput, iWidth)
{
    var sOutput = '<table border=1>';

    for (var i = 0; (i * iWidth) < arInput.length; i++)
    {
        sOutput += "<tr>";
        for (var j = 0 ; j  < iWidth; j++)
        {
            if(j < arInput.length)
                sOutput += "<td>"+arInput[i*iWidth+j]+"</td>";
            else
                sOutput += "<td></td>";
        }
        sOutput += "</tr>";
    }

    sOutput += "</table>";
    return sOutput;
}

document.write(createTable(characterList, 4));

De tabel die hier gevormd wordt heeft in de laatste rij drie cellen met 'undefined' erin. Dat komt omdat er geen teller is die bijhoudt welk element van de array we aan het verwerken zijn. Hier gaat het fout:

Java:

if(j < arInput.length)

j moet hier vervangen worden door een teller zoals hierboven beschreven. Ik heb o.a. geprobeerd:

Java:

if(((j+1)*(i+1))) < arInput.length)

(rijen * cellen), maar dit levert een merkwaardig resultaat op. Ook alternatieven hierop schijnen niet te werken. Wie heeft een oplossing?

[André]

Zo dan:

code:

kolommen = 3;
cellen = 15;

str = '<table border="1"><tr>';

for (var i = 0; i <= cellen; i++)
{
  str = str + '<td>' + i + '</td>';
  if ((i + 1) % kolommen == 0) { str = str + '</tr><tr>' };
}
str = str + '</table>';
document.write(str);

[Reveller]

Geweldig! Maar nu kijken of ik het begrijp:

% (modulo) betekent toch "blijft er iets over"? Met andere woorden: 5 % 2 = 1 en 8 % 3 = 2? Als dat zo is, kan ik je code verder analyseren en kan ik nog eens naar mijn begin kijken waarom dat helemaal voud ging...

[André]

Klopt