Jquery在table中的基本应用

最新推荐文章于 2019-05-28 11:44:15 发布

Jonckys

最新推荐文章于 2019-05-28 11:44:15 发布

阅读量308

点赞数

分类专栏： Jquery篇文章标签： Jquery JavaScript jquery table table如何获取行 table获取当前的td

本文链接：https://blog.csdn.net/qq_20617983/article/details/81088173

版权

Jquery篇专栏收录该内容

4 篇文章

订阅专栏

在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);
			}
     )

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