How to add table row in jquery+javascript

just paste this code … in the script section .. make sure your “id” is properly matched … otherwise it wont work .

.
.
var itemserial = document.getElementById('labitemsn').value = 1;

function deleteRow(id){
	
	var row = document.getElementById('rowbody');
	var delrownum = document.getElementById('item' + id);
	row.removeChild(delrownum);
}


$(function(){

	itemserial = 1;

	$('#itemadd').click(function(){
		
		var labitesn = document.getElementById('labitemsn').value;
		var labitemname = document.getElementById('labitemname').value;
		var labitemmrp = document.getElementById('labitemmrp').value;
		var labitemqty = document.getElementById('labitemqty').value;
		var labmrptotal = document.getElementById('labmrptotal').value;

		if(!labitemname || !labitemmrp || !labitemqty || !labmrptotal){
			alert("Required Information Need to Fill Up.");
			return false;
		}

		var labitems = document.getElementById('labitems');
		labitems.style.visibility = "visible";
		
		var row =   document.createElement('tr');
		row.id = "item"+itemserial;
		row.name = "item"+itemserial;

		var column = document.createElement('td');
		column.id = "labitemsn"+itemserial;
		column.name = "labitemsn"+itemserial;
		var text = document.createTextNode(itemserial);
		column.appendChild(text);
		row.appendChild(column);

		var column = document.createElement('td');
		column.id = "labitemname"+itemserial;
		column.name = "labitemname"+itemserial;
		var text = document.createTextNode(labitemname);
		column.appendChild(text);
		row.appendChild(column);

		var column = document.createElement('td');
		column.id = "labitemmrp"+itemserial;
		column.name = "labitemmrp"+itemserial;
		var text = document.createTextNode(labitemmrp);
		column.appendChild(text);
		row.appendChild(column);

		var column = document.createElement('td');
		column.id = "labitemqty"+itemserial;
		column.name = "labitemqty"+itemserial;
		var text = document.createTextNode(labitemqty);
		column.appendChild(text);
		row.appendChild(column);

		var column = document.createElement('td');
		column.id = "labmrptotal"+itemserial;
		column.name = "labmrptotal"+itemserial;
		var text = document.createTextNode(labmrptotal);
		column.appendChild(text);
		row.appendChild(column);

		var column = document.createElement('td');
		column.id = "labitemdlt"+itemserial;
		var span = document.createElement('span');
		span.className = "glyphicon glyphicon-trash";
		alert(itemserial);
		span.setAttribute("onclick","deleteRow("+ itemserial +")")
		
		column.appendChild(span);
		row.appendChild(column);

		var rowbody = document.getElementById('rowbody');
		rowbody.appendChild(row);

		itemserial++;
		document.getElementById('labitemsn').value = itemserial;
		document.getElementById('labitemname').value = '';
		document.getElementById('labitemmrp').value = '';
		document.getElementById('labitemqty').value = '';
		document.getElementById('labmrptotal').value = '';


	
	});


	$('#btn-invoice-submit').click(function(){
		
		if( parseInt(itemserial) < 2 ){
			alert('Empty Item cannot be submitted..');
		}
	});

	

});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s