เพิ่มแถวด้วย javascripts : Dynamically Add/Remove rows in HTML table using JavaScript

หน้าแรก JavaScripts เพิ่มแถวด้วย javascripts : Dynamically Add/Remove rows in HTML table using JavaScript

In this example, we have created a table which will display our html components. On pressing Add Row, a dynamic row will be created and added in the table. And on selecting the checkbox and pressing Delete Row, the row will be removed.

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


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

	</SCRIPT>
	</HEAD>
	<BODY>
	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

	<TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
	<TR>
	<TH>Select</TH>
	<TH>Sr. No.</TH>
	<TH>Value</TH>
	</TR>
	<TR>
	<TD><INPUT type="checkbox" name="chk"/></TD>
	<TD> 1 </TD>
	<TD> <INPUT type="text" /> </TD>
	</TR>
	</TABLE>

	</BODY>
	</HTML>

Demo: http://viralpatel.net/blogs/demo/dynamic-add-delete-row-table-javascript.html

More: http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

ขึ้นไปด้านบน