Checkboxes on right instead of left, how to change?

[ofeyofey]

Hi,
I have several Javascript DOM generated tables of checkboxes. The checkboxes are on the right of the text. I am not sure why this is nor how to change it.
Here is the code which generates the tables.

for(var i=countRows-1; i>0; i--)
{
    //deletes all rows except row 0 each time
    document.getElementById('examTables').deleteRow(i);
}
//console.log("subjects: " + item + " rows: " + subs[item].rows + " columns: " + subs[item].columns + " result: " + subs[item].vals);
var tblBody = document.getElementById('examTables');
//var tblBody = document.createElement("table");
row = "";//clear the row variable
row = document.createElement("tr");
position();
for(var item in subsOrdered)
{
    //console.log(item);
    //console.log("subjects: " + item + " rows: " + subs[item].rows + " columns: " + subs[item].columns + " result: " + subs[item].vals);
    var cols = subsOrdered[item].columns;
    if(cols == 0)
    {
        //console.log("neither 0 nor 2, col: " + cols);
        row = document.createElement("tr");
    }
    //console.log("subs:  subjects: " + item + " rows: " + subs[item].rows + " columns: " + subs[item].columns + " result: " + subs[item].vals);
    //console.log("subsOrdered:  subjects: " + item + " rows: " + subsOrdered[item].rows + " columns: " + subsOrdered[item].columns + " result: " + subsOrdered[item].vals);
    cell = document.createElement("td");
    cell.setAttribute("class", "left");
    //var text = document.createTextNode(" " + item + " ");
    var num = subsOrdered[item].vals.length;
    var nums = yr[item].yrValues.length;
    //console.log("Subjects in " + item);
    innerTable = document.createElement("table");
    innerTable.setAttribute("class", "inner");
    innerHeader = document.createElement("th");//how to add header to table?
    innerHeader.innerHTML = item + " Subjects";
    innerTable.appendChild(innerHeader);
    
    //<input type="checkbox" class="year" id="<?php htmlout($searchExam['name']); ?>" name="exams[]" value="<?php htmlout($searchExam['name']); ?>">
    for(var i=0; i<num; i++)
    {
        //console.log("Subjects: "  + subsOrdered[item].vals[i]);
        innerRow = document.createElement("tr");
        innerCell = document.createElement("td");
        //innerCell.setAttribute("class", "left");
        //innerText = document.createTextNode(subsOrdered[item].vals[i]);
        //innerCell.appendChild(innerText);
        innerInput = document.createElement("input");
        innerInput.name = "sub[]";
        innerInput.type = "checkbox";
        innerInput.value = item; 

        innerCell.innerHTML = subsOrdered[item].vals[i];
        innerCell.appendChild(innerInput);
        innerRow.appendChild(innerCell);
        innerTable.appendChild(innerRow);
    }
    cell.appendChild(innerTable);
    row.appendChild(cell);
 
     cell = document.createElement("td");
    innerTable = document.createElement("table");
    innerTable.setAttribute("class", "inner");
    innerHeader = document.createElement("th");//how to add header to table?
    innerHeader.innerHTML = item + " Years";
    innerTable.appendChild(innerHeader);
    
    //<input type="checkbox" class="year" id="<?php htmlout($searchExam['name']); ?>" name="exams[]" value="<?php htmlout($searchExam['name']); ?>">
    for(var i=0; i<nums; i++)//will iterate through specific year array for this subject
    {
        //console.log("Subjects: "  + subsOrdered[item].vals[i]);
        innerRow = document.createElement("tr");
        innerCell = document.createElement("td");
        innerCell.setAttribute("class", "left");
        //innerText = document.createTextNode(subsOrdered[item].vals[i]);
        //innerCell.appendChild(innerText);
        innerInput = document.createElement("input");
        innerInput.name = "sub[]";
        innerInput.type = "checkbox";
        innerInput.value = item; 
        innerCell.innerHTML = yr[item].yrValues[i];
        innerCell.appendChild(innerInput);
        innerRow.appendChild(innerCell);
        innerTable.appendChild(innerRow);
    }
    cell.appendChild(innerTable);
    row.appendChild(cell);


    //console.log("Rows in current table: " + document.getElementById('examTables').rows.length);
    if(cols == 2)
    {
        //var row = document.createElement("tr");
        //console.log("end a row, col: " + cols);
        tblBody.appendChild(row);
    }
}
//var row = document.createElement("tr");
tblBody.appendChild(row);        
console.log("End of subs iteration");
//subs[item].vals.length
//console.log(Object.keys(subs).length);//can get length
}

One table of generated HTMl looks like this and clearly shows the text before the checkbox.

The difference in checkboxes can be seen here,

Anybody have any ideas why the checkboxes are on the right instead of the left?

I did try swapping the order of these two lines but this doesn’t fix the issue. It actually makes checkboxes disappear. Below is the changed order.

innerCell.innerHTML = subsOrdered[item].vals[i];
innerCell.appendChild(innerInput);

Thanks

[bluedreamer]

If it’s purely visual presentation you’re after you could use CSS to target the elements, something like:

.inner input { float: left; margin-right: 0.5em; }

[ofeyofey]

Thanks, purely for visual presentation. I added that line to the CSS and looks like this now.

Thanks