how select table row?

See more:

Javascript

i want to make select table row. the default table row which is load on pageload is ok but when i add new row, i can't make select. how can i do this? here is my code. thank you for help!

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript">
	$(function() {
    var rows = $('tr').not(':first');/
    rows.on('click', function(e) {
        var row = $(this);
        if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
            row.addClass('highlight');
        } else {
            rows.removeClass('highlight');
            row.addClass('highlight');
        }       
    });
    $(document).bind('selectstart dragstart', function(e) { 
        e.preventDefault(); return false; 
    });    
	});
	function addRow(tableID) {

		var table = document.getElementById(tableID);

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var colCount = table.rows[0].cells.length;

		for(var i=0; i<colcount;>
			var newcell = row.insertCell(i);

			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
			//alert(newcell.childNodes);
			switch(newcell.childNodes[0].type) {
				case "text":
						newcell.childNodes[0].value = "";
						break;
				case "checkbox":
						newcell.childNodes[0].checked = false;
						break;
				case "select-one":
						newcell.childNodes[0].selectedIndex = 0;
						break;
			}
		}
	}
</script>
<style>
	<style>
	tr td{
		cursor:pointer;
	}
	.highlight{		
		background: #EFF2FF;
	}
	.rounded-corner
	{
		font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
		font-size: 12px;
		margin: 45px;
		width: 480px;
		text-align: left;
		border-collapse: collapse;
	}
	.rounded-corner thead th.rounded-company
	{
		background: #b9c9fe url('table-images/left.png') left -1px no-repeat;
	}
	.rounded-corner thead th.rounded-q4
	{
		background: #b9c9fe url('table-images/right.png') right -1px no-repeat;
	}
	.rounded-corner th
	{
		padding: 6px;
		font-weight: normal;
		font-size: 13px;
		color: #039;
		background: #b9c9fe;
	}
	.rounded-corner td
	{
		padding: 3px;
		border-top: 1px solid #fff;
		color: #669;
	}
	.rounded-corner tfoot td.rounded-foot-left
	{
		background: #e8edff url('table-images/botleft.png') left bottom no-repeat;
	}
	.rounded-corner tfoot td.rounded-foot-right
	{
		background: #e8edff url('table-images/botright.png') right bottom no-repeat;
	}
	.rounded-corner tbody tr:hover td
	{
		background: #EFF2FF;
	}
</style>
</style>
<INPUT type="button" value="Add Row"  önclick="addRow('dataTable')" />
<table id="dataTable" class="rounded-corner">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Apple</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
	<tr>
        <td>2</td>
        <td>Orange</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
	<tr>
        <td>3</td>
        <td>Orange</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
</table>