(十一)Javaweb (表格的增删、css演示操作、动画操作)

先给表格添加一个行标签

$("#button").click(function(){
					
					var username = $("#username").val();
					var password = $("#password").val();
					var salary = $("#salary").val();
					
					var obj = $("<tr>"+
						"<td>"+username+"td>"+
						"<td>"+password+"td>"+
						"<td>"+salary+"td>"+
						"<td>deletea>td>"+
					"tr>"
					);
				obj.appendTo($("#table"));
				});

给删除做点击事件

(十一)Javaweb (表格的增删、css演示操作、动画操作)_第1张图片

1.如何知道用户点击的是“确定”还是“取消”
使用if(confirm(“确定要删除吗”))如果确定返回ture
2.如何定位到行标签。通过$(this)定位到当前的a标签,取父元素,再去父元素,就会得到所在的行标签

(十一)Javaweb (表格的增删、css演示操作、动画操作)_第2张图片


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript" charset="utf-8">script>
	    <script type="text/javascript">
	    	$(function(){
      
				
				// 给提交按钮绑定单击事件
				$("#button").click(function(){
      
					
					var username = $("#username").val();
					var password = $("#password").val();
					var salary = $("#salary").val();
					
					var obj = $(""+
						""+username+""+
						""+password+""+
						""+salary+""+
						"delete"+
					""
					);
					// 添加到表格中
				obj.appendTo($("#table"));
				// 给提交后的a标签绑定单击事件调用函数hebing
				obj.find("a").click(hebing);
				});
				
				// 给原来的a标签绑定单击事件调用函数hebing
				$("a").click(hebing);
				
				
				// 删除操作
				var hebing = function(){
      
					var hang = $(this).parent().parent();
					var uname = hang.find("td:first").text();
					if(confirm("确定删除"+uname+"吗")){
      
						hang.remove();
					}
					return false;
				}
			});
	    script> 
		<style type="text/css">
			#mindiv{
      
				padding:20 20;
				border:solid 1px red;
				width:200px;
				height:200px;
				position: absolute;
				margin: auto;
				top:0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
			}
			.waiceng{
      
				position: absolute;
				margin: auto;
				width: 800px;
				height: 800px;
				top:0px;
				bottom: 0px;
				right: 0px;
				left: 0px;
			}
			.min{
      
				position: absolute;
				margin: auto;
				width: 300px;
				height: 300px;
				top:0px;
				bottom: 0px;
				right: 0px;
				left: 0px;
				border:solid 1px red;
			}
		style>
	head>
	<body>
		<div class="waiceng">
			<table id="table" align="center" style="" border="1" style="h" cellspacing="0" cellpadding="0">
				<tr>
					<th>Headerth>
					<th>Headerth>
					<th>Headerth>
					<th>th>
				tr>
				<tr>
					<td>Tomtd>
					<td>passwordtd>
					<td>salarytd>
					<td><a href="www.baidu.com">deletea>td>
				tr>
			table>
			
			<div class="min">
				<h2 align="center">学生管理系统h2>
				<table align="center" id="table">
					<tr>
						<td>username:td>
						<td><input id="username" type="text">td>
					tr>
					<tr>
						<td>password:td>
						<td><input id="password" type="text">td>
					tr>
					<tr>
						<td>salary:td>
						<td><input id="salary" type="text">td>
					tr>
					<tr>
						<td colspan="2" align="center"><input type="submit" id="button" value="提交"/>td>
					tr>
					
				table>
			div>
		div>
	body>
html>

css样式操作

(十一)Javaweb (表格的增删、css演示操作、动画操作)_第3张图片


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript" charset="utf-8">script>
        <style type="text/css">
        	div.redborder{
      
				border: solid 10px red;
			}
			div.blue{
      
				background-color: blue;
			}
        style>	
		<script type="text/javascript">
			$(function(){
      
				$("button:eq(0)").click(function(){
      
					$("div:first").addClass("redborder blue");
				});
				$("button:eq(1)").click(function(){
      
					$("div:first").removeClass("blue redborder");
				});
				$("button:eq(3)").click(function(){
      
				var obj = $("div:first").offset();
				console.log(obj);
				$("div:first").offset({
      
					top:100,
					left:1000
				   });
				});
				
			});
		script>
	head>
	
	<body>
		<div style="width: 100px;height: 100px;" class="">
			
		div>
		<button type="button">addClassbutton>
		<button type="button">removeClassbutton>
		<button type="button">toggleClassbutton>
		<button type="button">offClassbutton>
	body>
html>

(十一)Javaweb (表格的增删、css演示操作、动画操作)_第4张图片
(十一)Javaweb (表格的增删、css演示操作、动画操作)_第5张图片
(十一)Javaweb (表格的增删、css演示操作、动画操作)_第6张图片
(十一)Javaweb (表格的增删、css演示操作、动画操作)_第7张图片


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" type="text/javascript" charset="utf-8">script>
        <style type="text/css">
        	div.redborder{
      
				border: solid 10px red;
			}
			div.blue{
      
				background-color: blue;
			}
        style>	
		<script type="text/javascript">
			$(function(){
      
				$("button:eq(0)").click(function(){
      
					$("div:first").addClass("redborder blue");
				});
				$("button:eq(1)").click(function(){
      
					$("div:first").removeClass("blue redborder");
				});
				$("button:eq(3)").click(function(){
      
				var obj = $("div:first").offset();
				console.log(obj);
				// $("div:first").offset({
      
				// 	top:100,
				// 	left:1000
				//    });
				});
				$("button:eq(5)").click(function(){
      
					$("div:first").hide();
				});
				$("button:eq(4)").click(function(){
      
					$("div:first").show();
				});
				$("button:eq(6)").click(function(){
      
					var obj = function(){
      
					$("div:first").toggle(1000,obj);
					}
					obj();
				});
				
				$("button:eq(7)").click(function(){
      
					$("div:first").fadeIn();
				});
				$("button:eq(8)").click(function(){
      
					$("div:first").fadeOut();
				});
				$("button:eq(10)").click(function(){
      
					$("div:first").fadeToggle();
				});
				$("button:eq(9)").click(function(){
      
					$("div:first").fadeTo(1000,0.5);
				});
				
				
				
			});
		script>
	head>
	
	<body>
		<div style="width: 100px;height: 100px;" class="blue">
			
		div>
		<button type="button">addClassbutton>
		<button type="button">removeClassbutton>
		<button type="button">toggleClassbutton>
		<button type="button">offClassbutton><br>
		
		<button type="button">showbutton>
		<button type="button">hidebutton>
		<button type="button">togglebutton><br>
		
		
		<button type="button">fadeInbutton>
		
		<button type="button">fadeOutbutton>
		
		<button type="button">fadeTobutton>
		
		<button type="button">fadeTogglebutton>
		
		
		
	body>
	body>
html>

你可能感兴趣的:(javaweb)