Jquery在table中的基本应用

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

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


http://www.niftyadmin.cn/n/864475.html

相关文章

Jquery之使用ajax打开文本

var txt $.ajax({ type: "get", url: "/ChooseElemet/js/cssStyle.txt", async: false }); var Temp txt.responseText&#xff1b;

.html()与.text()区别与辨析

这两天看了一下html和jquery的选择器&#xff0c;并对w3chool上面的在线编辑产生了兴趣&#xff0c;但是在用textarea展示后台纯html的时候发生错误&#xff0c;查阅各种资料发现不行……心态炸了。废话不多说了&#xff0c;上干货。 首先&#xff0c;html属性中有两个方法&am…

JQuery函数加载顺序

$(document).load(); 当web页面以及其附带的资源文件&#xff0c;如CSS&#xff0c;Scripts&#xff0c;图片等&#xff0c;加载完毕后执行此方法。 常用于检测页面&#xff08;及其附带资源&#xff09;是否加载完毕。 $(document).ready(); 当页面DOM对象加载完毕&#xff…

Jquery中.val()与.value之间的区别

三年多没敲过代码了&#xff0c;今年打算捡起来&#xff0c;是需要多么大的勇气。但是为了实现自我价值&#xff0c;履行自我的承诺&#xff0c;这就是责任。没有什么难不难&#xff0c;晚不晚之说&#xff0c;是我经常对别人说的那样&#xff0c;再晚不过心晚&#xff0c;&…

学习总结之Html篇章

text-indent &#xff1a;文本缩进 display:inline-block 行内元素 display&#xff1a;block 块级元素 display&#xff1a;none 不显示而且也不占html的位置 hidden&#xff1a;hidden 占用html位置 background-size&#xff1a;cover图片自适应 justufy 文本两端对齐 borde…

jquery文档就绪的三种书写方式

//写法一 $(document).read(function(){alert("文档加载完毕!"); })//写法二 $().read(function(){alert("文档加载完毕!"); })//写法三 $(function(){alert("文档加载完毕!"); })永远相信&#xff0c;美好明天就在不久将来

line-height失效解决办法

对和文字相连接的img、input、textarea、select、object等元素加以属性 margin: (所属line-height-自身img,input,select,object高度)/2px 0; vertical-align:middle-------垂直居中同时该属性指挥对inline-block元素起作用哟

什么是DOM(个人理解)

了解DOM需要清楚几个问题&#xff1a; 什么是DOM&#xff1f;DOM可以用来干什么&#xff1f;DOM是怎么来的&#xff1f;怎么使用DOM&#xff1f;什么是DOM? DOM(document Object Model&#xff09;,是针对HTML和XML的API。 可以理解为DOM就是一系列功能集合。 DOM可以用来干…