Member Avatar for azegurb

Hi there
i have one question about selecting chekboxes.
i have script form that adds dynamic rows and cheks/uncheks checkboxes. by default this form has one chekboxe. this function checks/uncehks only when i entered one row at least. when i dont enter any row it doesnt checks any checkboxes. who can explain and help me why?
thanks in advance

<html>
	<head>
		<title> Add/Remove dynamic rows in HTML table </title>
		<script language="javascript">
			function addRow(tableID) {
	 
				var table = document.getElementById(tableID);
	 
				var rowCount = table.rows.length;
				var row = table.insertRow(rowCount);
	 
				var cell1 = row.insertCell(0);
				var element1 = document.createElement("input");
				element1.type = "checkbox";
				element1.name="qutu";
				element1.id="qutu";
				cell1.appendChild(element1);
	 
				var cell2 = row.insertCell(1);
				cell2.innerHTML = rowCount + 1;
	 
				var cell3 = row.insertCell(2);
				var element2 = document.createElement("input");
				element2.type = "text";
				cell3.appendChild(element2);
	 
			}
	 
			function deleteRow(tableID) {
				try {
				var table = document.getElementById(tableID);
				var rowCount = table.rows.length;
	 
				for(var i=0; i<rowCount; i++) {
					var row = table.rows[i];
					var chkbox = table.rows[i].cells[0].childNodes[0];
					if(null != chkbox && true == chkbox.checked) {
						table.deleteRow(i);
						rowCount--;
						i--;
					}
	 
				}
				}catch(e) {
					alert(e);
				}
			}	
			function selectAll(chk) {
				for(var i=0;i<chk.length;i++) {
					chk[i].checked = true;
				}
			}
			
			function unselectAll(chk) {
				for(var i=0;i<chk.length;i++) {
					chk[i].checked = false
				}
			}
                        
                                                
		</script>
	</head>
	<body>
		<form name="az">
			<table id="dataTable" width="400px" border="1">
				<tr>
					<td colspan = "4">
					<input type="button" value="Add Row" onclick="addRow('dataTable')" /> 
					<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
					<input type="button" value="select all" onclick="selectAll(qutu)" />
					<input type="button" value="Unselect all" onclick="unselectAll(qutu)" />
                                        					</td>	
				</tr>
				<tr>
					<td><input type="checkbox" name="qutu" id="qutu"/>select all</td>
					<td> 1 </td>
					<td> <input type="text" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 220 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by azegurb
Member Avatar for Airshow

Azegurb,

Wow! I'm not too sure what's going on there. Behaviour is rather strange, and it's to do with addressing the checkbox elements as the collection qutu . I'm actually amazed it works as well as it does, 'cos I didn't know you could do that.

For reliability I would take a different approach in several respects:

  • Frame all javascript inside a window.onload handler.
  • Attach all event handlers in javascript, not HTML. This has the advantage that document.getElementById('dataTable') only needs to be evaluated once.
  • For selectAll and unselectAll functions, loop through table.rows , instead of qutu .
  • Create the original first row in javascript rather that HTML. This guarantees it to be of the same format as other rows. If you change the format, you only need to do so in one place.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Add/Remove dynamic rows in HTML table </title>
<script language="javascript">
onload = function(){
	function addRow(table) {
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		var element1 = document.createElement("input");
		element1.type = "checkbox";
		element1.name = "qutu";
		//element1.id = "qutu";//ids should be unique
		cell1.appendChild(element1);
		row.checkbox = element1;//makes for easy addressing later
	 
		var cell2 = row.insertCell(1);
		//cell2.innerHTML = rowCount + 1;//not required if you call renumberRows();

		var cell3 = row.insertCell(2);
		var element2 = document.createElement("input");
		element2.type = "text";
		cell3.appendChild(element2);
	
		renumberRows(table);
	}
	 
	function deleteRow(table) {
		try {
			var rowCount = table.rows.length;
			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = table.rows[i].cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}
			}
		}
		catch(e) { alert(e); }
		renumberRows(table);
	}

	function renumberRows(table) {//For consideration
		for(var i=1; i<table.rows.length; i++) {
			table.rows[i].cells[1].innerHTML = i;
		}
	}

	function selectAll(table) {
		for(var i=1; i<table.rows.length; i++) {
			table.rows[i].checkbox.checked = true;
		}
	}
			
	function unselectAll(table) {
		for(var i=1; i<table.rows.length; i++) {
			table.rows[i].checkbox.checked = false;
		}
	}

	var button_addRow     = document.az.addRow;
	var button_deleteRow  = document.az.deleteRow;
	var button_selectAll   = document.az.selectAll;
	var button_unselectAll = document.az.unselectAll;
	var dataTable = document.getElementById('dataTable');

	button_addRow.onclick      = function() { addRow(dataTable); };
	button_deleteRow.onclick   = function() { deleteRow(dataTable); };
	button_selectAll.onclick   = function() { selectAll(dataTable); };
	button_unselectAll.onclick = function() { unselectAll(dataTable); };

	addRow(dataTable);
};
</script>
</head>

<body>

<form name="az">
<table id="dataTable" width="400px" border="1">
<tr>
<td colspan="4">
<input type="button" name="addRow" value="Add Row" />
<input type="button" name="deleteRow" value="Delete Row" />
<input type="button" name="selectAll" value="Select all" />
<input type="button" name="unselectAll" value="Unselect all" />
</td>
</tr>
</table>
</form>

</body>
</html>

You will see that I have included a renumber function. This may or not be something you want. If not, then reinstate the line in addRow that numbers the rows as they are added.

Airshow

Member Avatar for azegurb

Thank you very much Airshow. I prefer your aproach to Javascript programming. thanks thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.