0

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
4
Views
7 Years
Discussion Span
Last Post by lambing
0
<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.

0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.