CODEWITHSUNDEEP
javascripthtml
logan
logan

Reputation: 8366

Javascript to align Table Cell is not working when table rows are dynamically generated

I am generating table rows dynamically using javascript. I can set up height of new cells but could not align the cell content.

Here is my HTML and Javascript

<table id="myTable">
<tr>
<td height="50" valign="top">Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table><br>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell1.height = "50";
cell1.valign = "top";
}
</script>

Upvotes: 0

Views: 300

Answers (1)

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

You have written valign but it is actually vAlign (A is capital)

cell1.vAlign = "top";

Upvotes: 2

Related Questions