如何用js实现获取<table>里面的数据,通过js路径
时间: 2023-03-27 21:00:38 浏览: 54
可以使用以下代码来获取<table>里面的数据:
var table = document.getElementsByTagName("table")[];
var rows = table.getElementsByTagName("tr");
for (var i = ; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
for (var j = ; j < cells.length; j++) {
var data = cells[j].innerHTML;
console.log(data);
}
}
这段代码会获取第一个<table>元素,然后遍历每一行<tr>,再遍历每一列<td>,最后获取每个单元格的数据并输出到控制台。
相关问题
<!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`的图片。你可以根据需要修改图片的路径和名称。
修改代码使鼠标移入哪一栏显示对应图片<!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` 属性,从而显示对应图片。