jquery 选择<tr>下的某个<td>元素
时间: 2023-10-16 13:06:35 浏览: 36
你可以使用以下 jQuery 选择器来选择 `<tr>` 下的某个 `<td>` 元素:
```javascript
$('tr td:nth-child(n)') // n 为你想选择的 td 的位置
```
例如,要选择第二个 `<td>` 元素,可以使用以下代码:
```javascript
$('tr td:nth-child(2)')
```
如果你想根据 `<td>` 中的内容来选择元素,你可以使用 `:contains()` 伪类选择器。例如,如果你想选择包含 "example" 文本的 `<td>` 元素,可以使用以下代码:
```javascript
$('tr td:contains("example")')
```
注意,`:contains()` 伪类选择器是区分大小写的。如果你想进行不区分大小写的搜索,你可以使用 `.filter()` 方法来过滤元素。例如:
```javascript
$('tr td').filter(function() {
return $(this).text().toLowerCase().indexOf('example') > -1;
});
```
这将选择包含 "example" 文本的所有 `<td>` 元素,不区分大小写。
相关问题
修改代码使鼠标移入哪一栏显示对应图片<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../images/女靴.jpg") }) }) </script> </body> </html>
下面是修改后的代码,可以实现鼠标移入哪一栏显示对应图片:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
table{
margin: 100px auto;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" width="310px" cellspacing="0" align="center" >
<tr>
<td>女靴</td>
<td rowspan="9"><img id="product-img" src="../images/女靴.jpg"></td>
<td>女包</td>
</tr>
<tr>
<td>雪地靴</td>
<td>男包</td>
</tr>
<tr>
<td>冬裙</td>
<td>登山鞋</td>
</tr>
<tr>
<td>呢大衣</td>
<td>皮带</td>
</tr>
<tr>
<td>毛衣</td>
<td>围巾</td>
</tr>
<tr>
<td>棉服</td>
<td>皮衣</td>
</tr>
<tr>
<td>女裤</td>
<td>男毛衣</td>
</tr>
<tr>
<td>羽绒服</td>
<td>男棉服</td>
</tr>
<tr>
<td>牛仔裤</td>
<td>男靴</td>
</tr>
</table>
<script src="../jquery-3.7.0.js"></script>
<script type="text/javascript">
$(function(){
$("td").mouseenter(function(){
var index = $(this).index();
var imgSrc = "../images/" + $("tr:first-child td").eq(index).text() + ".jpg";
$("#product-img").prop("src", imgSrc);
});
});
</script>
</body>
</html>
```
具体来说,修改了以下部分:
1. 在 `<img>` 元素上添加了一个 `id` 属性,方便在 JavaScript 中引用该元素。
2. 在 JavaScript 代码中,使用了 `$("td").mouseenter()` 选择器来选择所有 `<td>` 元素,并在鼠标移入时绑定事件处理函数。
3. 在事件处理函数中,通过 `$(this).index()` 方法获取当前鼠标所在的列号,然后使用 `$("tr:first-child td").eq(index).text()` 获取该列第一行的文本内容(即商品名称),再拼接出对应的图片路径。
4. 最后,将图片路径赋值给 `<img>` 元素的 `src` 属性,从而显示对应图片。
<!doctype html> <html> <head> <meta charset="UTF-8"> <style> #bills{ width: 400px; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { 空缺处 }); </script> </head> <body> <table id="bills"> <tr > <th>编号</th> <th>分类</th> <th>名称</th> <th>价格(元)</th> </tr> <tr > <td>01</td> <td>食品</td> <td>农夫山泉矿泉水</td> <td>2.00</td> </tr <tr > <td>02</td> <td>日用品</td> <td>洗发水</td> <td>25.00</td> </tr> <tr> <td>03</td> <td>娱乐休闲</td> <td>暑假旅游</td> <td>5000.00</td> </tr> </table> </body>将食品替换成图片显示
你可以在jQuery代码中使用`.eq()`方法选择表格中需要替换的单元格,然后再使用`.html()`方法将单元格中的文本替换成图片。具体实现如下:
HTML代码:
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
#bills {
width: 400px;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
// 选择第二行第二个单元格并将其中的文本替换成图片
$('#bills tr:eq(1) td:eq(1)').html('<img src="image.png">');
});
</script>
</head>
<body>
<table id="bills">
<tr>
<th>编号</th>
<th>分类</th>
<th>名称</th>
<th>价格(元)</th>
</tr>
<tr>
<td>01</td>
<td>食品</td>
<td>农夫山泉矿泉水</td>
<td>2.00</td>
</tr>
<tr>
<td>02</td>
<td>日用品</td>
<td>洗发水</td>
<td>25.00</td>
</tr>
<tr>
<td>03</td>
<td>娱乐休闲</td>
<td>暑假旅游</td>
<td>5000.00</td>
</tr>
</table>
</body>
</html>
```
上述代码会将表格中第二行第二个单元格的文本替换成一张名为`image.png`的图片。你可以根据需要修改图片的路径和名称。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <button>批量删除</button> <label><input type="checkbox" /></label> 学号 姓名 专业 操作 <label><input type="checkbox" /></label> 9527 唐伯虎 国画 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 007 武松 体育 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1024 诸葛亮 心理学 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 1010 刘义 计算机 <button class="view">查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 6969 晨儿 桑蚕技术 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 666 章三 小龙虾烹饪 <button>查看</button><button>修改</button><button>删除</button> <label><input type="checkbox" /></label> 5520 里斯 天文 <button>查看</button><button>修改</button><button>删除</button> 尾页 下一页 上一页 首页 <script> 如何实现删除功能?
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)