jQuery学习-DOM节点操作

最新推荐文章于 2025-08-15 10:51:23 发布

原创最新推荐文章于 2025-08-15 10:51:23 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #ViewUI

jQuery学习专栏收录该内容

1 篇文章

订阅专栏

本博客展示了如何使用HTML、CSS、JavaScript等技术创建一个简单的用户信息收集表单，并实现实时显示用户输入信息的功能。代码通过jQuery库实现表单元素样式和交互逻辑，用户可以在页面上输入姓名和花名，点击提交按钮后，信息会实时显示在表格中，同时表单元素会清空，以便再次输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行效果如下：

代码：

<html>
	<head>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
	</head>
	
	<body>
		<form id="userInfo">
			姓名: <input id="userName"  type="text"/>	<br />		
			花名: <input id="otherName"  type="text"/>	<br />		
			<input value="提交" class="button_clicked" type="button"/>			
		</form>					
		<table border="2px" width="60%">
			<tr>
				<th align='center'>姓名</th>
				<th align='center'>花名</th>
			</tr>
		</table>
	</body>

	
</html>

<style type="text/css">
	.button_clicked{
		color:red;
		font-weight:bold;
		font-size:30px;
		border-width:5px;
		background-color:blue;
		width:200px;
		height:80px;
	}	
	.button_normal{
		color:green;
		font-weight:bold;
		font-size:30px;
		border-width:5px;
		background-color:red;
		width:200px;
		height:80px;
	}
</style>

<script type="text/javascript">
	$(
		function(){
			$('input[value=提交]').click(
				function(){
					if($(this).hasClass('button_clicked')){
						$(this).removeClass('button_clicked');
						$(this).addClass('button_normal');
					}else{
						$(this).removeClass('button_normal');
						$(this).addClass('button_clicked');
					}					
					
					if(($('#userName').val() != "") && ($('#otherName').val() != "")){
						var msg = "<th align='center'> <font color='red'>" + $('#userName').val() + "<font></th><th align='center'>" + $('#otherName').val() + "</th>";					
						$('table').append("<tr>" + msg + "</tr>");	
						$('#userName').val('');
						$('#otherName').val('');					
					}else{
						alert('请输入姓名和花名!!!');
					}					
				}
			);						
		}	
	);	
</script>