jquery作业

最新推荐文章于 2024-06-26 10:23:17 发布

淮南草

最新推荐文章于 2024-06-26 10:23:17 发布

阅读量693

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/zhuisaozhang1292/article/details/88934547

版权

WEB前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

实现通过选择 checkbox 完成对应数据的修改并保存

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<style>
		.edit_button{
 			background:gray;
		}
		.editing_button{
			background:red;
		}
	</style>
	<div>
		<button id = 'choose_all' type = "button">全选</button>
		<button id = 'reverse_all' type = "button">反选</button>
		<button id = 'cancel' type = "button">取消</button>
		<button id = 'edit' type = "button" class = 'edit_button'>进入编辑模式</button>
	</div>
	<div style = 'margin-top:20px'>
		<table id = 'table_info' border = '1'> 
			<thead>
				<tr>
					<td>选择</td>
					<td style = "text-align:center">主机名</td>
					<td style = "text-align:center">端口</td>
					<td>状态</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type = 'checkbox'> 
					</td>
					<td class = 'hostname'>192.168.1.100</td>
					<td class = 'port'>5000 </td>
					<td class = 'statue'>在线</td>
				</tr>
				<tr>
					<td>
						<input type = 'checkbox'> 
					</td>
					<td class = 'hostname'>192.168.1.101</td>
					<td class = 'port'>5001 </td>
					<td class = 'statue'>下线</td>
				</tr>
				<tr>
					<td>
						<input type = 'checkbox'> 
					</td>
					<td class = 'hostname'>192.168.1.102</td>
					<td class = 'port'>5002 </td>
					<td class = 'statue'>在线</td>
				</tr>
			</tbody>	
		</table>
	</div>
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script>
		$('#edit').click(function(){
			var edit_statue = $(this).attr('class')
			$(this).removeClass(edit_statue).addClass(edit_statue == "edit_button" ?"editing_button":"edit_button");
			if (edit_statue == 'edit_button'){
				$("#table_info [type='checkbox']").each(function(){
					if ($(this).prop("checked") == true)
						{
							tds = $(this).parent().siblings();
							var tds_text = [];
							tds.each(function(){
								tds_text.push($(this).text())
							})
							tds.remove();
							
							var td1_s = "<td class = 'hostname'><input value = '";
							var td1_value = tds_text[0];
							var td1_e = "'></input></td>";
							td1 = td1_s + td1_value + td1_e;
							
							var td2_s = "<td class = 'port'><input value = '";
							var td2_value = tds_text[1];
							var td2_e = "'></input></td>";
							td2 = td2_s + td2_value + td2_e;
							
							var td3_s = "<td class = 'statue'><input value = '";
							var td3_value = tds_text[2];
							var td3_e = "'></input></td>";
							td3 = td3_s + td3_value + td3_e;
					
							var td3_s = "<select class='statue'>";
							if (tds_text[2] == "在线"){
								td3_value = "<option value='在线'>在线</option><option value='下线'>下线</option>"
							}
							else{
								td3_value = "<option value='下线'>下线</option><option value='在线'>在线</option>"
							}
							var td3_e = "'></input></td>";
							td3 = td3_s + td3_value + td3_e;
							$(this).parent().parent().append(td1,td2,td3);
						}
				})
			}
			else{
				$("#table_info [type='checkbox']").each(function(){
					if ($(this).prop("checked") == true){
						tds = $(this).parent().siblings();
						var tds_text = [];
						tds.each(function(){
							if ($(this).attr('class') == 'statue')
								tds_text[$(this).attr('class')] = $(this).val()
							else{
								tds_text[$(this).attr('class')] = $(this).find("input").val()
							}							
						})
						tds.remove();
						td_hostname = "<td class = 'hostname'>" + tds_text['hostname'] + "</td>"
						td_port = "<td class = 'port'>" + tds_text['port'] + "</td>"
						td_statue = "<td class = 'statue'>" + tds_text['statue'] + "</td>"
						$(this).parent().parent().append(td_hostname,td_port,td_statue);					
					}					
				})
				$('#table_info [type="checkbox"]').prop("checked",false);	
				
			}
			
		})
		$('#choose_all').click(function(){
			$('#table_info [type="checkbox"]').prop("checked",true);	
		})
		$('#cancel').click(function(){
			$('#table_info [type="checkbox"]').prop("checked",false);	
		})
		$('#reverse_all').click(function(){
			$("#table_info [type='checkbox']").each(function(){
				$(this).prop("checked",$(this).prop("checked")?false:true)
			})
		})

	</script>
</body>
</html>