jQuery each中的this

使用jQuery操作DOM元素实现表格特定行背景色改变

最新推荐文章于 2021-03-25 17:20:03 发布

原创最新推荐文章于 2021-03-25 17:20:03 发布 · 839 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html #ViewUI

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用jQuery遍历表格的每一行，并通过`:nth-child`选择器定位到特定行，然后修改其背景色。通过简单的代码示例，展示了如何在不同的行上应用不同的样式。

使用
$.each(function(){
alert(this.nodeName);
alert($(this));
});

要注意二者的不同 this 是一个dom对象，要使用jQuery 的方法必须用jQuery(this)包含，负责只能用dom对象的方法，看下面的例子


<html>
	<head>
		<title>nth-child-test</title>
		<script src="jquery-1.6.1.min.js"></script>
		<script type="text/JavaScript">
			$(function(){
				$("tr").each(function(){
					$(this.nodeName+":nth-child(2)").attr("style","color:red;");	
				});	
			});
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
	</body>
</html>


<html>
<head>
<title>jQuery nth-child example</title>

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head>

<body>

<h1>jQuery nth-child example</h1>

<table border=1>
	<tr><td>Row #1</td></tr>
	<tr><td>Row #2</td></tr>
	<tr><td>Row #3</td></tr>
	<tr><td>Row #4</td></tr>
	<tr><td>Row #5</td></tr>
	<tr><td>Row #6</td></tr>
	<tr><td>Row #7</td></tr>
	<tr><td>Row #8</td></tr>
	<tr><td>Row #9</td></tr>
	<tr><td>Row #10</td></tr>
</table>
<br/>

<button>:nth-child(4)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(even)</button>    
<button>:nth-child(odd)</button>


<script type="text/javascript">
    $("button").click(function () {
      var str = $(this).text();
      $("tr").css("background", "white");
      $("tr" + str).css("background", "coral");
    });
</script>

</body>
</html>