JQuery有关元素选择

最新推荐文章于 2023-03-10 15:07:49 发布

luobo10000

最新推荐文章于 2023-03-10 15:07:49 发布

阅读量81

点赞数

文章标签： jQuery CSS J# JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/luobo10000/article/details/83810263

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>aaa.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <style>
  	div span{
  		background-color:red;
  		border-width:1px;
  		border-type:1px;
  		width:20px;
  	}
  	#left{
  		float:left;
  	}
  	#right{
  		float:right;
  	}
  	#main{
  		width:500px;
  	}
	table{
		border-width:1px;
		border-style: inset;
		border-color:#CC0000;
	}
	td{
		border-width:1px;
		border-style: inset;
		border-color:#CC0000;
	}
	tr{
		color:  #990066;
	}
  </style>
  <script type="text/javascript" src="jquery_1.4_All.js"></script>
  
  <body>
    <div id="main">
    	<div id="left">
    		<div>请输入ID号：<input type="text" id="id"/></div>
    		<div>请输入数量：<input type="text" id="mes"/></div>
    		<div>请输入厂商：<input type="text" id="factory"/></div>
    		<div><input type="button" id="add" value="添加" onClick="add()"/><input id="del" onClick="del()" type="button" value="删除" disabled="disabled" /><input id="alter" onClick="alter()" type="button" value="修改" disabled="disabled" /></div>
    	</div>
    	<div id="right">
    		<table id="table1">
    			<tr>
    				<td onClick="sortByRow(0)">ID号</td>
    				<td onClick="sortByRow(1)">数量</td>
    				<td onClick="sortByRow(2)">厂商</td>
    			</tr>
    			<tr>
    				<td>5050</td>
    				<td>1323</td>
    				<td>SATA</td>
    			</tr>
    			<tr>
    				<td>2230</td>
    				<td>3123</td>
    				<td>SAS</td>
    			</tr>
    			<tr>
    				<td>3010</td>
    				<td>231</td>
    				<td>SATA</td>
    			</tr>
				<tr>
    				<td>3020</td>
    				<td>1140</td>
    				<td>SAS</td>
    			</tr>
    		</table>
			<!--div onClick="aaa()">1111</div-->
    	</div>
    </div>
  </body>

$(document).ready(function(){
		$("table tr:first").css({"background-color":"#0000FF","color":"#FFFFFF","font-weight":"bold"});
		$("table tr:first > td").css({"border-style":"outset"});
		csh();
		c2();
	})
	//function aaa(){
	//var a = /^\d*$/;
	//alert(a.test("123"))
	//}
	/**
	 *更改td背景色
	 **/
  	function csh(){
		$("tr:even>td").css({"background-color":"#00CCFF"});
		$("tr:odd>td").css({"background-color":"#3399FF"});	
		
	}
	
	 function c2(){
	 	/**
	     *点击行，变色
	  	 */
	 	$("tr:gt(0)").live("click", function(){
			
			//改变当前行之前，将之前的色变回初始状态
    		csh();
			//将ID为SS的tr元素，ID去掉
			$("#ss").attr("id","");
			$(this).children().css({"background-color":"red"});
			//将当前tr元素id命 名为ss；
			$(this).attr("id","ss");
			//得到当前tr元素的子元素数组
			var arr = $(this).children();
			
			controlButton(false);
			//将当前选中数据显示在输入框中，用于修改数据
			$("#id").val(arr[0].innerHTML);
			$("#mes").val(arr[1].innerHTML);
			$("#factory").val(arr[2].innerHTML);
		});	
	 }
	 /**

	  *删除数据
	  */
	 function del(){
	 	$("#ss").remove();
		csh();
	 	controlButton(true);
	 }
  	/**
	 *修改数据
	 */
	function alter(){
		$("#ss").text("");
		$("#ss").append("<td>"+$("#id").val()+"</td><td>"+$("#mes").val()+"</td><td>"+$("#factory").val()+"</td>");
		csh();
		controlButton(true);
	}
	/**
	 *添加新数据
	 */
	function add(){
		if($("#id").val()==""){
	 		alert("id不能为空");	
	 	}else if($("#mes").val()==""){
	 		alert("数量不能为空");
	 		
	 	}else if($("#factory").val()==""){
	 		alert("厂商不能为空");
	 	}else{
	 		$("#table1 tr:last-child").after("<tr><td>"+$("#id").val()+"</td><td>"+$("#mes").val()+"</td><td>"+$("#factory").val()+"</td></tr>"); 
			csh();
			controlButton(true);
		}
	 }

/** *点击列名，对当前列排序 */function sortByRow(a){ csh(); controlButton(true); for(var i = 1 ;i<$("tr:gt(0)").length+1;i++){  $("tr:eq("+i+")>td:eq("+a+")").css({"background-color":"red"});  } for(var i = 1 ;i<$("tr:gt(0)").length+1;i++){  for(var j = i+1;j<$("tr:gt(0)").length+1;j++){   if(Number($("tr:eq("+i+")>td:eq("+a+")").text())>Number($("tr:eq("+j+")>td:eq("+a+")").text())){   for(var m = 0 ;m< $("tr:eq(0)>td").length;m++){    var temp = $("tr:eq("+i+")>td:eq("+m+")").text();    $("tr:eq("+i+")>td:eq("+m+")").text($("tr:eq("+j+")>td:eq("+m+")").text());    $("tr:eq("+j+")>td:eq("+m+")").text(temp);     }    }   }  } }/** *按钮控制 */function controlButton(b){ $("#del").attr("disabled",b); $("#alter").attr("disabled",b); $("#add").attr("disabled",!b); if(b){   $("#id").val("");  $("#mes").val("");  $("#factory").val("");  } }

luobo10000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery有关元素选择

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;aaa.html&lt;/title&gt; &lt;meta http-equiv="keywords" content=&quo
复制链接

扫一扫