Question

jQuery怎样选择表格中每一行的第一列?

Answer 1

选择表格中每一行的第一列可以使用jquery的遍历实现

$("table tr").each(function() {    // 遍历每一行
    $(this).children('td:eq(0)');  // td:eq(0)选择器表示第一个单元格
});

下面给出实例演示：点击按钮后表格的第一列将被加上背景色

1. 创建Html代码

   <div class="box">
   	<span>点击按钮后，第一列将被加上背景色：</span><br>
   	<div class="content">
   		<table>
   			<tr><td>1</td><td>2</td><td>3</td></tr>
   			<tr><td>4</td><td>5</td><td>6</td></tr>
   			<tr><td>7</td><td>8</td><td>9</td></tr>
   		</table>
   	</div>		
   	<input type="button" class="btn" value="选中第一列">
   </div>

2. 简单添加一点css样式

   div.box{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}
   input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;}
   .selected{background:#99ccff;}
   table{border-collapse:collapse;}
   td{padding:5px 10px;border:1px solid green;}

3. 编写jquery代码

   $(function(){
   	$("input:button").click(function() {
   		$("table tr").each(function() {
   			$(this).children('td:eq(0)').addClass('selected');
   		});
   	});
   })

4. 观察显示效果

• 初始状态

  

• 点击按钮选择第一列后

  

Answer 2

$("#table1 tr:eq(N) td:nth-child(N)").html();获取id为table1表格第N+1个tr第N个td的值。

Answer 3

$("table tr:first td:first")

Answer 4

三十三、JQuery简介+选择器