Member Avatar for azegurb

hi all,
i have a code that add dynamic row and it has an option that it allow to delete rows by checking checkboxes. can anyone help me to check all checkoboxes at
here is my code

<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="chk"+rowCount;
			element1.id="chk"+rowCount;
			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 select(to_be_checked, say){
	var table = document.getElementById('dataTable');
	var sirasayi=table.rows.length;
	
	
 for (i=0; i<sirasayi; i++){ 
   if (to_be_checked){   
 document.az.chk[i].checked=true; 
} 
   else{ 
    
document.az.chk[i].checked=false; 
   } 
 }   
} 
		
		
		
		
 
	</SCRIPT>
</HEAD>
<BODY>
 <form name="az"><TABLE id="dataTable" width="350px" border="1">
		<TR>
	<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="select(true)" />
	
			<TD><INPUT type="checkbox" name="chk" id="chk"/>select all</TD>
			<TD> 1 </TD>
			<TD> <INPUT type="text" /> </TD>
		</TR>
	</TABLE>
 </form>
</BODY>
</HTML>
  • 2 Contributors
  • 3 Replies
  • 133 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by lambing
Member Avatar for lambing 
<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="chk";
				element1.id="chk";
				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 select(to_be_checked, say){
				var table = document.getElementById('dataTable');
				var sirasayi=table.rows.length;
				
				
			 for (i=0; i<sirasayi; i++){ 
			   if (to_be_checked){   
			 document.az.chk[i].checked=true; 
			} 
			   else{ 
				
			document.az.chk[i].checked=false; 
			   } 
			 }   
			} 
			
			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(chk)" />
					<input type="button" value="Unselect all" onclick="unselectAll(chk)" />
					</td>	
				</tr>
				<tr>
					<td><input type="checkbox" name="chk" id="chk"/>select all</td>
					<td> 1 </td>
					<td> <input type="text" /> </td>
				</tr>
			</table>
		</form>
	</body>
</html>

It works, however, i changed the name of the checkbox to be able to pass them with the function i created.

Member Avatar for azegurb

thanks very much but i would like to ask one question why is it possible to paste rowCount = table.rows.length instead of chk.length
thanks again

Member Avatar for lambing

First of all when you call the function addRow, you passed a parameter which is the id of table("dataTable"). Then addrRow function accepts it when you placed a parameter ("tableID"). In short, you just passed the id of the table to a parameter. It is like, var tableID = document.getElementById("dataTable");

Sorry if it's a little bit confusing. I am just a starter in using javascript. And today is my third month using javascript. Why don't you start studying about jQuery, it's easy to understand unlike YUI

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.