javaScript DOM编程 Demo

最新推荐文章于 2022-03-28 21:14:24 发布

黑暗浪子

最新推荐文章于 2022-03-28 21:14:24 发布

阅读量547

点赞数

分类专栏： javaScript+html5+CSS学习文章标签： javaScript DOM案例

本文链接：https://blog.csdn.net/u012453619/article/details/37918841

版权

javaScript+html5+CSS学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

要求：点击提交查询，生成一个表格，并且，可以删除指定的行

详细代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Html study</title>
	<script>
		function forRegister(){
			var v_table = document.getElementById('newtable');
			if(v_table == null){
				var v_table = document.createElement('table');
				v_table.id = 'newtable';
				v_table.border = 1;		
				document.body.appendChild(v_table);
			}
			var v_tr = document.createElement('tr');
			var v_td1 = document.createElement('td');
			var v_td2= document.createElement('td');
			var v_td3= document.createElement('td');
			var v_a = document.createElement('a');
			var v_node = document.createTextNode('delete');
			
			v_table.appendChild(v_tr);
			v_tr.appendChild(v_td1);
			v_tr.appendChild(v_td2);
			v_tr.appendChild(v_td3);
			
			v_td1.appendChild(document.createTextNode(document.getElementById('username').value));
			v_td2.appendChild(document.createTextNode(document.getElementById('password').value));
			v_td3.appendChild(v_a);
			
			v_a.appendChild(v_node);
			v_a.href = '#';
			v_a.onclick = function forDelete(){
				var node = this.parentNode.parentNode;
				var v_table = document.getElementById('newtable');
				if(v_table != null){
					if(confirm('delete the '+node.firstChild.firstChild.nodeValue+'?'))
						v_table.removeChild(node);
				}
			}	
		}
    </script>
</head>
<body>
	<!--
    <iframe src="1.html"></iframe>
    -->
    <form action="#">
    	<table border=0>
    	<tr>
        	<td>username:</td><td><input id="username" type="text"></input></td>
        </tr>
        <tr>
        	<td>password</td><td><input id="password" type="password"></input></td>
        </tr>
        <tr>
        	<td><input type="submit" name="Reginter" onClick="forRegister()"></input></td>
            <td><input type="reset" name="Empty"></input></td>
        </tr>
        </table>
    </form>
</body>
</html>