javascript 동적 으로 표 줄 추가 및 삭제

2378 단어 JavaScripthtml
오늘 은 한가 해서 js 로 작은 예 를 들 어 표 줄 을 동적 으로 추가 하고 삭제 하 며 소스 코드 를 첨부 합 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>          </title>
	
	<script type="text/javascript">		
		window.onload = function addRow() {
			var name = document.getElementById("name").value;
			var age = document.getElementById("age").value;
			
			var nameText = document.createTextNode(name); //      
			var ageText = document.createTextNode(age);
			
			var nameTd = document.createElement("td"); //  td  
			var ageTd = document.createElement("td");
			
			var tr = document.createElement("tr");	//  tr  
			nameTd.appendChild(nameText);
			ageTd.appendChild(ageText);
			
			tr.appendChild(nameTd);
			tr.appendChild(ageTd);
			
			var tbody = document.getElementById("tbody");
			tbody.appendChild(tr);
		}
		
		function delRow() {
			var objTbody = document.getElementById("tbody");
			objTbody.removeChild(objTbody.lastChild); //         ,                  。         
		}
	</script>
</head>

<body>	
	<table id="t1" border="1">
		<thead>
			<tr>
				<td>Name</td>
				<td>Age</td>
			</tr>
		</thead>
		<tbody id="tbody">
			<tr>
				<td>name1</td>
				<td>25</td>
			</tr>
			<tr>
				<td>name2</td>
				<td>26</td>
			</tr>
		</tbody>
	</table>
	<hr>
	
	Name:<input type="text" id="name" />Age:<input type="text" id="age" />
	<input type="button" value="add" onclick="addRow()"/>
	<input type="button" value="del" onclick="delRow()"/>
</body>

</html>

좋은 웹페이지 즐겨찾기