Generate Table with only one Column

Question

Hello i try to generate a table with only one column. So my Links get displayed in only one column.

Here is my function:

    function createTableForPdfFiles() {

        //To Create The Table
        var table = document.createElement("table");
        table.setAttribute('id', 'pdfTable');
        table.setAttribute('class', 'AANTable');

        // insert Title Row
        var TitleRow = table.insertRow();
        var cell = TitleRow.insertCell(); 
        cell.setAttribute('class', 'AANTitleRow');
        cell.setAttribute('colSpan', pdfFiles.length + 1);
        cell.appendChild(document.createTextNode("Datenblätter"));

        //Insert Table Rows
        var pdfRow = table.insertRow();
        var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
        cell.setAttribute('class', 'AANPdfRow');

        for (var i = 0; i < pdfFiles.length; i++) {
            var cell = pdfRow.insertCell();
            var link = document.createElement("a");
            link.setAttribute("href", "www.test.at" + pdfFiles[i].Link);
            var linktext = document.createTextNode(pdfFiles[i].Link);
            link.appendChild(linktext);
            cell.appendChild(link);
            cell.setAttribute('class', 'AANPdfCell');

        }

        $("#divTable").append(table);
}

Right now it looks like:

But i want it to look like:

So how i can i make that possibe? I tried to add another Row to the table but the debugger says not supported...... Any help would be really great.

thanks for your Time.

Answer 1

You have to create anew row foer each pdf.

Hae to put this

var pdfRow = table.insertRow();
var cell = pdfRow.insertCell(); //Where the PDF´s are displayed
cell.setAttribute('class', 'AANPdfRow');

Inside the for

take a look at this -> fiddle