Dynamically Add rows & Column

Foros de discusión

anand gopalan, modificado hace 11 años.

Dynamically Add rows & Column

Expert Mensajes: 442 Fecha de incorporación: 2/03/12 Mensajes recientes

Hi,

When I click "Add Row" I want to add rows & column. Please let me know how to do that in java script. Please see the screenshot.

Subhash Pavuskar, modificado hace 11 años.

RE: Dynamically Add rows & Column

Regular Member Mensajes: 234 Fecha de incorporación: 13/03/12 Mensajes recientes

Hi,
Here is the code hope that may help you !!!




	<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 = "text";
			element1.name = "txtbox[]";
			cell1.appendChild(element1);


			var cell2 = row.insertCell(1);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "txtbox[]";
			cell2.appendChild(element2);


			var cell3 = row.insertCell(2);
			var element3 = document.createElement("input");
			element3.type = "text";
			element3.name = "txtbox[]";
			cell3.appendChild(element3);
			
			var cell4 = row.insertCell(3);
			var element4 = document.createElement("input");
			element4.type = "text";
			element4.name = "txtbox[]";
			cell4.appendChild(element4);



		}

		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 = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}

	</script>



	<input type="button" value="Add Row" onclick="addRow('dataTable')">

	

	<input type="Button" Value="Apply"><table id="dataTable" width="350px" border="1">
		<tbody><tr>
		<th>From </th>
		<th>To </th>
		<th>Land Mark</th>
		<th>Total Km</th>
		</tr>
		<tr>
			
			<td> <input type="text"> </td>
			<td> <input type="text"> </td>
			<td> <input type="text"> </td>
			<td> <input type="text"> </td>
		</tr>
	<tr>
		

	</tr>
	</tbody></table>

anand gopalan, modificado hace 11 años.

RE: Dynamically Add rows & Column

Expert Mensajes: 442 Fecha de incorporación: 2/03/12 Mensajes recientes

Hello subhash,

thanks for your code and I modify my html and when I add the rows I want give the sequence no. Initially it is 1, when I add the row it come 8, 9, 10, But I want 1,2,3.
I know the reason, its because of table rows, totally its 7 rows, so when I added a new row it give the 8, how to control that. Please help me. see the below code

<html>
<head>
<title>Travel Details</title>
<SCRIPT language="javascript">
function IsDecimal(e)
{

var chrCode = (e.which) ? e.which : event.keyCode;
return (chrCode > 47 && chrCode < 58) ||
chrCode == 8 ||
chrCode == 45 ||
chrCode == 46 ? true: false;
}
function Blank_TextField_Validator()
{
var text = document.getElementById('id');
if (text.value == '') {
alert('Employee ID should not empty ');
return false;
}
return true;
}
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="chkbox[]";
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
alert("rowcount"+rowCount);
cell2.innerHTML = rowCount + 1;

var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "from[]";
cell3.appendChild(element2);

var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "to[]";
cell4.appendChild(element3);

var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "landmark[]";
cell5.appendChild(element4);

var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "km[]";
cell6.appendChild(element5);

}

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;
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {

if(rowCount <= 7) {

alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}

}
}catch(e) {
alert(e);
}
}
</script>

</head>

<body>
<form method="post" action="<portlet:actionURL />" name="<portlet:namespace />tra_form" onsubmit="return Blank_TextField_Validator()">
<table id="dataTable" border="1">

<tr>
<th colspan="7" style="text-align:center;">Employee Travel Details</th>
<tr><td>Employee ID:</td>
<td colspan="6"><input type="text" name="id" maxlength="7" onkeypress="return IsDecimal(event);" /></td></tr>
<tr><td >Vehicle Type:</td>
<td colspan="6">
<select id="vehicletype">
<option value="1">Car</option>
<option value="2" selected>Two Wheeler</option>
</select></td></tr>
<tr><td>Approver</td>
<td colspan="6">
<select id="approver">
<option value="1">RajKrishnan</option>
<option value="2" selected>Ganesh</option>
</select></td></tr>
<tr><td>Car No:</td>
<td colspan="6"><input type="text" name="carNo"/></td></tr>
<tr>
<td>Select</td>
<td>No:
<td>From</td>
<td>To</td>
<td>Land Mark</td>
<td colspan="2">Total KM</td>
</tr>
<div >
<tr>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<td><input type="text" name="from"/></td>
<td><input type="text" name="to"/></td>
<td><input type="text" name="landmark"/></td>
<td><input type="text" name="km" maxlength="7" onkeypress="IsDecimal(event);"/></td>

</tr>
</div>

</table>
<table id="dataTable1" border="1">
<tr>
<td colspan="7" style="text-align:center;"><input type="submit" name="apply" value="Apply"/></td>
<td><input type="button" onclick="addRow('dataTable')" value="Add Row" /></td>
<td><input type="button" onclick="deleteRow('dataTable')" value="Delete Row" /></td>
</tr>
</table>
</form>
</body>
</html>

Pete Helgren, modificado hace 11 años.

RE: Dynamically Add rows & Column

Regular Member Mensajes: 225 Fecha de incorporación: 7/04/11 Mensajes recientes

Perhaps you could add a class to each row like class='dest_detail' and then use $('.dest_detail').length to get the current number of rows and then add one to that. I haven't tried it but your goal is to uniquely id just the rows with the details and add a selector that finds them.

Manish Yadav, modificado hace 11 años.

RE: Dynamically Add rows & Column

Expert Mensajes: 493 Fecha de incorporación: 26/05/12 Mensajes recientes

Hi Anand Gopalan,

You are getting row count in column 2 because you are adding row count in cell(2).In Place of row count you can declare global javascript variable .that variable you can increment in function addRow() so you can get 1 ,2,3,4,5,6

Thanks & Regards
Manish Yadav
Email:- manishyadav1103@gmail.com
Contact No:- +91-8452899010