Trouble with setting id for dynamically generated table

Question

Never mind. This was my mistake. This code works fine.

I have a function that's supposed to create and populate a table. I'm also trying to set the id element of some of the columns, but the function that I have isn't working and I can't seem to figure out why.

This is my code:

HTML:

<div id="result_table">

            <table border="0" cellspacing="3" cellpadding="3" id="summaryTable" class="tablesorter table table-striped">
            <thead>
            <tr style="font-weight: bold; text-align: center;">
            <th>Well ID</th>
            <th>Dominant Gene</th>
            <th>%</th>
            <th>Secondary Gene</th>
            <th>%</th>
            <th>No. of Reads that Mapped</th>
            <th>No. of Mutations</th>
            <th>Mutation Information</th>
            <th>View</th>
            </tr>
            </thead>
        <tbody id="summaryBody">
        </tbody>
    </table>
</div>

Javascript:

function structureTable(test){
    if (kiloseqResult==null){
        throw "Error: no databse defined"
    };

    document.getElementById("summaryTable").style.visibility="visible";
    kiloseqDatabase = JSON.parse(kiloseqResult);

    var table = document.getElementById("summaryBody");

    for (i=0;i<kiloseqDatabase.length;i++){
        var row = table.insertRow(i);

        var kiloseqKeys = Object.keys(kiloseqDatabase[i])
        var keyLength = Object.keys(kiloseqDatabase[i]).length;

        // Painstakingly setting up the cells...

        var cell = row.insertCell(0);
        cell.innerHTML = kiloseqDatabase[i]['id']

        var cell = row.insertCell(1);
        cell.innerHTML = kiloseqDatabase[i]['gene1'].substr(5)

        var cell = row.insertCell(2);
        cell.innerHTML = parseFloat(kiloseqDatabase[i]['percent1']).toFixed(2)

        var cell = row.insertCell(3);
        if (kiloseqDatabase[i]['gene2']=="None"){
            cell.innerHTML = "None"
        } else {
            cell.innerHTML = kiloseqDatabase[i]['gene2'].substr(5)
        }

        var cell = row.insertCell(4);
        cell.innerHTML = parseFloat(kiloseqDatabase[i]['percent2']).toFixed(2)

        var cell = row.insertCell(5);
        cell.innerHTML = kiloseqDatabase[i]['count']

        var cell = row.insertCell(6);
        cell.innerHTML = ""

        var cell = row.insertCell(7);
        cell.innerHTML = ""

        var cell = row.insertCell(8);
        cell.innerHTML = ""

    };

    $(document).ready(function() 
        { 
            $("#summaryTable").tablesorter(
                {sortList: [[0,0], [1,0]]}
                ); 
        }
    );

    for (i=0;i<kiloseqDatabase.length;i++){
        document.getElementById("summaryBody").rows[i].cells[6].id = "test";
    };
};

kiloseqResult is a variable that checks whether kiloseqDatabase is populated. kiloseqDatabase contains the information that's supposed to populate the table.

Oddly enough, the for-loop that sets up the ID (and yes, I did try including this in the first for-loop but tried breaking it up when that didn't work) is fine when I run it in my Chrome's console. But it doesn't seem to work within the function.

Any help would be much appreciated. Thank you!

Answer 1

Have you tried putting your ID assignment logic within the document.ready scope? You can't assign an ID to an element or select it from the DOM before it's rendered:

$(document).ready(function() 
        { 
            $("#summaryTable").tablesorter(
                {sortList: [[0,0], [1,0]]}
                ); 
            for (i=0;i<kiloseqDatabase.length;i++){
                document.getElementById("summaryBody").rows[i].cells[6].id = "test";
            };
        }
    );