Click here to Skip to main content
15,881,742 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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!
HTML
<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>
Posted
Updated 30-Jun-14 15:58pm
v2

1 solution

To resolve this issue, you have to use Event Delegation to register the click event handler to the dynamically created rows.

Please visit the following article for more details:
Add / Delete Rows Dynamically using jQuery in ASP.NET[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900