Dynamic table- add row with event bind
HTML
<button id="add_row">Add Row</button>
<table cellpadding="0" cellspacing="0" border="1" width="100%" id="tblInventoryItems">
<tr class="tch">
<th class="thc"> </th>
<th class="thc" scope="col">Item</th>
<th class="thc" scope="col">Unit Price</th>
<th class="thc" scope="col">Quantity</th>
<th class="thc" scope="col">Total</th>
</tr>
<tr class="dataRow">
<td>
<img name="DeleteRow_1" alt="Delete Row" class="button_link" src="" /></td>
<td class="ttc">
<input type="text" name="tbTitle_1" class="field_input tbTitle" /></td>
<td class="ttc">
<input type="text" name="tbSalesPrice" class="field_input tbSalesPrice" /></td>
<td class="ttc">
<input name="tbQuantity_1" type="text" class="field_input tbQuantity" /></td>
<td class="ttc">
<input type="text" name="tbTotal_1" class="field_input tdTotal" />
</td>
</tr>
</table>
<ul><li>Stripped all ID's from elements other than table</li>
<li>Added class to inputs "tbTtitle", "tbSalesPrice" etc</li>
<li>Added class "dataRow" to first row data</li>
<li>FAKE AUTOCOMPLETE: on keyup takes value and concatenates value+value+value</li>
</ul>
CSS
ul{ margin-top:40px;}
li{margin-top:.5em;}