Adding new rows

This is the javascript code that I am using. I added the multiple   to align each additional row with my first row. Is there a better way to do this ? Also, how can I edit (required entry) each of the fields in the additonal rows ?

<script type="text/javascript">
function addMaterialNumbers() {
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("addMaterialNumbers").insertRow();

//add 3 cells (<td class="TitleText" >) to the new row and set the innerHTML to contain text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "       <input type='text' name='conditionCode' size='4'>";

oCell = newRow.insertCell();
oCell.innerHTML = "        <input type='text' name='materialNumber' size='20'>";

oCell = newRow.insertCell();
oCell.innerHTML = "    <input type='text' name='quantity' size='8' value='0'>";

oCell = newRow.insertCell();
oCell.innerHTML = "    <input type='text' name='unitValue' size='8' value='0.00'>";

oCell = newRow.insertCell();
oCell.innerHTML = "     <input type='text' name='snFlag' size='1'>"

oCell = newRow.insertCell();
oCell.innerHTML = "   <input type='button' value='Delete' onclick='removeRow(this);'/>";

}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case <tr>)
*/
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its rowIndex
document.all("addMaterialNumbers").deleteRow(oRow.rowIndex);

}
// -->
</SCRIPT>