js動態控制表單表格

時間 2019-11-20

原文原文鏈接

js動態控制表單表格，這裏操做只講，添加一行，刪除一行，刪除某一行某一列。javascript

直接放代碼：html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table id="tabl" border=1 cellpadding=10 cellspacing=0>
			<thead bgcolor="#00B3FF">
				<tr>
					<td>姓名</td>
					<td>聯繫方式</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>孟小偉</td>
					<td>686898</td>
				</tr>
				<tr>
					<td>靜妹妹</td>
					<td>686898</td>
				</tr>
				<tr>
					<td>臭豬 </td>
					<td>686898</td>
				</tr>
			</tbody>
		</table>
		<!--表單基礎特別舉例-->
		<form>                        <!--這裏有個有趣的東西，for=「cao」 ,而後後面的<input />添加id爲cao，你點擊這裏的文字，會在input直接提示你輸入-->
			<p><label for="cao">名字是什麼，點擊我就能夠到框框裏面：</label><input type="text" id="cao" /></p>
		</form>
		<script>
			window.onload = function() {
				/*建立一行，執行chuang()函數*/
				chuang();
				/*刪除一行，或者某一行一列,執行dete函數*/
                                dete();
				function chuang() {
					var tab = document.getElementById("tabl");/*取到要操做的對象*/
					var tr = tab.insertRow(2);/*給其添加序號爲2的行*/
					var Ptext = new Array();/*建立文本節點組數*/
					Ptext[0] = document.createTextNode("黑豬");
					Ptext[1] = document.createTextNode("998342");
					for(var i = 0; i < Ptext.length; i++) {/*遍歷*/
						var cd = tr.insertCell(i);/*按序號建立列*/
						cd.appendChild(Ptext[i]);/*把文本節點添加到對應的列*/
					}
				} 
				function dete(){
					var tab = document.getElementById("tabl");
					tab.deleteRow(4);/*刪除一行*/
					tab.rows[3].deleteCell(1);/*刪除某一行某一列*/
				}

			}
		</script>
	</body>

</html>