Jquery在table中的基本应用

你的名字 2022-05-19 00:00 176阅读 0赞

在html中我们生成的一个table中包含了行、列，其中选取其中的cell的时候，我们需要采用行、列来选取一个cell，很多小伙伴可能遇到过同样的问题，废话不多说，代码见：

首先我们生成一个五行，七列的Table

<table width="100%" border="1px" style="padding: 0; text-align: center; margin: 0px;border-style: dotted;">
    				<tr>
    					<td>.class</td>
    					<td>#id</td>
    					<td>*</td>
    					<td>element</td>
    					<td>element,element</td>
    				</tr>
    				<tr>
    					<td>element element</td>
    					<td>element>element</td>
    					<td>element+element</td>
    					<td>[attribute]</td>
    					<td>[attribute=value]</td>
    				</tr>
    				<tr>
    					<td>[attribute~=value]</td>
    					<td>[attribute|=value]</td>
    					<td>:first-letter</td>
    					<td>:first-line</td>
    					<td>:first-child</td>
    				</tr>
    				<tr>
    					<td>:before</td>
    					<td>:after</td>
    					<td>:lang(language)</td>
    					<td>element1~element2</td>
    					<td>[attribute^=value]</td>
    				</tr>
    				<tr>
    					<td>[attribute$=value]</td>
    					<td>[attribute*=value]</td>
    					<td>:first-of-type</td>
    					<td>:last-of-type</td>
    					<td>:only-of-type</td>
    				</tr>
    				<tr>
    					<td>:only-child</td>
    					<td>:nth-child(n)</td>
    					<td>:nth-last-child(n)</td>
    					<td>:nth-of-type(n)</td>
    					<td>:nth-last-of-type(n)</td>
    				</tr>
    				<tr>
    					<td>:empty</td>
    					<td>:enabled</td>
    					<td>:disabled</td>
    					<td>:checked</td>
    					<td>:not(selector)</td>
    				</tr>
    </table>

**1、使用Jquery实现隔行变色**

//var irow=$("table").find("tr").length; //irow获取table的行数
    	//var icol=$("table").find("tr").find("td").length; //通过查找table中的行，在行里面找列
    	//$(this).parent().prevAll().length + 1;//获取所在行的行数
    	//$(this).prevAll().length+1 //获取所在行的列号
    	//$("tr:nth-child(even)").css("background-color", "yellow");
    	$("tr:nth-child(even)").css("background-color", "yellow"); //记住 如果这里有多个样式,需要使用集合eg:.css({"background-color":"red","border":"1px"})
    	$("tr:nth-child(odd)").css("background-color", "aliceblue");

**2、使用Jquery选取鼠标移到到的坐标**

$("table td").dblclick(function() {
    		//粗糙理解：this指鼠标移动到当前位置的对象 
    		//this[0]:this里面面包含多个属性，其中this[0]表示对象的juqery属性值
    		//table是个如果要取到当前的cell的值，需要找到当前的行列定义
    		//通过查找当前元素的父元素(tr),在行的集合中查找当前td的列
    		var tdseq = $(this).parent().find("td").index($(this)[0]);  
    		//通过查找当前元素的父元素(table),在表的集合中查找当前tr的行
    		var trseq = $(this).parent().parent().find("tr").index($(this[0]).parent()); /
    		var getValue = $("tr:eq(" + trseq + ") td:eq(" + tdseq + ")").text();
    		alert("行:"+trseq+" 列:"+tdseq);
    			}
         )

目前处于新手状态，希望各位大佬能够点评指导，先到这里谢谢了