如何从 HTML 中的表列中获取数据
How to get data from columns of a table in HTML
<table border="1" cellpadding="2" cellspacing="0" width="75%" bordercolor="#000000">
<tbody><tr bgcolor="mediumblue">
<td width="20%"><p align="center"><font face="Arial" color="white" size="2"><strong>SUB CODE</strong></font></p></td>
<td width="26%"><p align="left"><font face="Arial" color="white" size="2"><strong>SUB NAME</strong></font></p></td>
<td width="13%"><p align="left"><font face="Arial" color="white" size="2"><strong>THEORY</strong></font></p> </td>
<td width="10%"><p align="left"><font face="Arial" color="white" size="2"><strong>PRACTICAL</strong></font></p> </td>
<td width="17%"><p align="left"><font face="Arial" color="white" size="2"><strong>MARKS</strong></font></p></td>
<td width="14%"><p align="center"><font face="Arial" color="white" size="2"><strong>GRADE</strong></font></p></td>
</tr>
<tr bgcolor="#ffffff">
<td align="middle"><font face="Arial" size="2"> 042</font></td>
<td align="left"><font face="Arial" size="2">PHYSICS</font></td>
<td align="left"><font face="Arial" size="2">027</font></td>
<td align="left"><font face="Arial" size="2">028</font></td>
<td align="left"><font face="Arial" size="2">055 </font></td>
<td align="middle"><font face="Arial" size="2">D1</font></td>
</tr>
<tr bgcolor="#e6e6fa">
<td align="middle"><font face="Arial" size="2">043</font></td>
<td align="left"><font face="Arial" size="2">CHEMISTRY</font></td>
<td align="left"><font face="Arial" size="2">026</font></td>
<td align="left"><font face="Arial" size="2">029</font></td>
<td align="left"><font face="Arial" size="2">055 </font></td>
<td align="middle"><font face="Arial" size="2">D2</font></td>
</tr>
<tr bgcolor="mediumblue">
<td> </td>
<td colspan="5"><b><font face="Arial" size="2" color="white">Result: XXXX
<!-- : -->
</font></b> <b><font face="Arial" size="2" color="white"> </font></b></td>
</tr>
</tbody></table>
我有上面的代码片段,可以创建一个表。我想从表中提取MARkS
并将其存储在数组中。
document.getElementsByTagName("table")[0].cells[3]
以UNDEFINED
形式提供输出
那么我该怎么做呢?
注意:我无法编辑页面的 html。
要访问第 3 列,您只需要进行少量更改。首先是为表添加 id:
<table id="table1" ...>
第二次将 JavaScript 代码更改为:
var table1 = document.getElementById("table1")
for(var i = 0; i < table1.rows.length; i++) {
var cell_value = table.rows[i].cells[3].textContent;
}
然后,您可以使用cell_value
或者简单地使用 document.getElementById("table1").rows[i].cells[j].textContent
和 i
将是您想要的行并j
您的列(在本例中为 3
号):
document.getElementById("table1").rows[0].cells[3].textContent
为了避免页眉和页脚(如果作为<thead>
或<tfoot>
存在于表中),您需要更改循环:
for(var i = 1; i < table1.rows.length - 1; i++) { ...
i = 1
页眉,table1.rows.length - 1
页脚。
如果无法将id=""
添加到表中,可以尝试使用以下 JavaScript 代码:
var cell_value = document.getElementsByTagName("table")[0].rows[0].cells[3].textContent;
document.getElementsByTagName("table")[0]
是具有索引的表格 [0]
,因此它是文档正文中的第一个表格,然后rows[0]
表示它是第一行,cells[3]
表示它是第四列,textContent
将从单元格中提取数据为您。
希望这有帮助。
document.getElementsByTagName("table")
返回一个 DOM 元素数组。很难从数组列表中找出您的表。
选择表的最佳方法是将 ID 与其关联并使用document.getElementById
<table id="my-table" border="1" cellpadding="2" cellspacing="0" width="75%" bordercolor="#000000">
Javascript:
document.getElementById("my-table");
此外,您需要指定单元格之前的行以选择特定单元格,即第一个单元格
document.getElementById("my-table").rows[0].cells[0]
此解决方案是有效的:
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
productId = $tds.eq(0).text(),
product = $tds.eq(1).text(),
Quantity = $tds.eq(2).text();
// do something with productId, product, Quantity
});
您可以将表和单元格放入不同的变量中,以便于调试。在此示例中,需要为表定义一个 id 名称,如下所示<table id="tbl">
var table = document.getElementByID("tbl");
var d = table.getElementsByTagName("tr")[0],
var r = d.getElementsByTagName("td")[0];
- Ajax-如何获取数据
- 从键值结构中获取数据,并将其与AngularJS中ng重复的值进行比较
- 从数据库中获取数据并插入JavaScript变量
- 从单击的行上的列中获取数据
- Solr查询以按日期月份获取数据&年
- React路由器服务器端渲染和ajax获取数据
- 使用JavaScript在IE9中获取数据列表选项
- 从json子数组获取数据
- 使用angularjs中的rest调用通过id获取数据
- 正在从ruby应用程序中的数据库中获取数据
- 如何从servlet获取数据到ajax成功
- 从选择下拉菜单中获取数据
- 异步获取数据使用JavaScript同步获取数据
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 如何在Angular.js中循环动态添加Fields并获取数据并将其发送到服务器
- JavaScript-获取数据属性的值返回未定义的值
- 如何从文本区域获取数据并使用javascript进行解密
- 在put方法之前从作用域获取数据
- 事件循环的MEAN.JS setInterval进程(从另一个服务器获取数据)
- 使用ReactJS和Flux架构从服务器获取数据的正确方法是什么