How to add form elements after insertRow?

I am experimenting with adding and removing rows from the end of a table dynamically. It is actually more than experimenting it is a project to add to my resume and need to get it done so I can hit the pavement!!!

Here is how I am writing the javascript to dynamically add or remove table rows.

1. Get the number of rows and do an insertRow:

  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  //if theres no header row in the table, then iteration = lastRow + 1 *l
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

Can I assign a css class to the row? If so, how?
For example:
.blck11 {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-style: normal;
      font-weight: normal;
      color: #000000;
      text-decoration: none;
}

2. Do an insertCell(0,1,2,3,4,etc...) for number of cells in table. I am inserting three
types of html into the cells:

A. CSS - set background color to the cell.

B. Input Box - This is a standard input box, nothing fancy.
The attributes I need to assign are:  type="text" id="dept1", name="dept1 and size="5".  Note, on name and dept, the numeric is appended to "dept" and is the row number.

C. Text- insert the row number. For example: <td width="40" size="2" align="center">5</td>".  Need to assign width and align attributes.  I'm not so sure "size" is relevant.


I know I must get the html tag attributes assigned correctly.  For example, the width goes with the <td> and not with the <input> tag.  The name, type size, value and id go with the <input> tag.  

Below is my attempt to create these 3 types of cells.  I get errors on the input box because of "width".  Also, javascript chokes and dies on my CSS code. I have no idea how to assign css only to a cell.

How do I get the attributes assigned to the correct html element (input box width and css in a cell) using javascript and DOM?


Thanks much!!!

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

Input Box - <td width="40"><input name="dept1" type="text" size="5"  value=""/></td>
-------------------------------------------------------------------------------------
  var cell2 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'bu' + iteration;
  el.id = 'bu' + iteration;
  el.size = 5;
  el.width = 40;   <<<--- This, I believe, is wrong? Width should go with <td></td>
  el.appendChild(el);
 
 
CSS - <td width="2" bgcolor="#7D7D7D" top-margin="2"></td>
----------------------------------------------------------
  var cell0 = row.insertCell(0);
  var el = document.createElement('class');  <<<--very lame, class is not correct, but don't know what to use for css?
  var el.style = document.attribute("style", "width: 2px; " + "bgcolor: #7D7D7D; " + "top-margin: 2px;");
  cell0.appendChild(el);
 
 
TEXT - <td width="40" size="2" align="center">1</td>
-------------------------------------------------------
  var cell1 = row.insertCell(1);
  var textNode = document.attribute("style", "align: center; " + iteration);
  cell1.appendChild(textNode);
 
where itteration is the row number.