i'm using javascript to add rows to a table dynamically:

function addRow() {
    var table = document.getElementById("bestelling");

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount-5);

    var cell1 = row.insertCell(0);
    var bedrag = document.createElement("input");
    bedrag.type = "text";
    bedrag.name = "bedrag[]";
    cell1.appendChild(bedrag);
}

This seems to work perfectly, except I want the first cell to align right.

Any suggestions?

i'm using javascript to add rows to a table dynamically:

function addRow() {
    var table = document.getElementById("bestelling");

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount-5);

    var cell1 = row.insertCell(0);
    var bedrag = document.createElement("input");
    bedrag.type = "text";
    bedrag.name = "bedrag[]";
    cell1.appendChild(bedrag);
}

This seems to work perfectly, except I want the first cell to align right.

Any suggestions?

• javascript
• html

• can you create a fiddle at jsfiddle – Zword Commented Jan 4, 2014 at 14:10

2 Answers 2

You can try adding this (I am assuming that cell1 is the "first cell" that you are referring to):

cell1.style.textAlign = "right";

This styles the cell with CSS textAlign right.

Alternatively, you can set a class name to the cell with this JavaScript code:

cell1.className = "alignRight"

And use CSS to set the align right.

.alignRight{
     text-align:right;
}

To make this even simpler, you could use jQuery - http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js

$("<tr id='new-row'>").insertBefore("#first-row")      // # is the id selector

Then you can set the style and content of #new-row using the html() and css() methods:

$("#new-row").css("text-align","right");
$("#new-row").html("Hello world!");

Hope this helps.