Question

I am trying to use JavaScript to add rows to a table dynamically using the below code:

function addRowToTable()
{
  var tbl = document.getElementById('targets');
  var lastRow = tbl.rows.length;
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);    

  var cellRight = row.insertCell(1);
  var el = document.createElement('textarea');
  el.name = 'target' + iteration;
  el.id = 'target' + iteration;
  el.style.property="margin:4px; max-width:400px; width:400px; max-height:35px; height:35px;";
  cellRight.appendChild(el);
}

Everything works except the el.style.property. I have tried el.style previously.

How can this be fixed?

Here is the page (partially)

Answer 1

Use style.cssText instead of style.property.

Since your styles look constant, consider storing the style properties in a stylesheet, and add the style using a class identifier:

<style> <!-- Inside the head -->
.myclassname {
    margin:4px;
    max-width:400px;
    width:400px;
    max-height:
    35px; height:35px;
}
</style>

// Replace el.style.... with:
el.className = 'myclassname';