如何从HTML中的表的列中获取数据

时间:2016-01-30 10:13:11

标签: javascript 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&nbsp;&nbsp;&nbsp;&nbsp;</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&nbsp;&nbsp;&nbsp;&nbsp;</font></td>
    <td align="middle"><font face="Arial" size="2">D2</font></td>
  </tr>

  


  <tr bgcolor="mediumblue">
  <td>&nbsp;</td>
  <td colspan="5"><b><font face="Arial" size="2" color="white">Result:&nbsp;&nbsp; XXXX
    <!-- : --> 
    
  </font></b> <b><font face="Arial" size="2" color="white"> &nbsp;</font></b></td>
  </tr>
  
  
</tbody></table>

我有上面的代码片段,用于创建表格。我想从表中提取MARkS并将其存储在数组中。

document.getElementsByTagName("table")[0].cells[3]

将输出设为UNDEFINED

那我怎么能这样做呢?

注意:我无法修改网页的HTML。

4 个答案:

答案 0 :(得分:2)

要访问第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].textContenti将是您想要的行和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将为您提取单元格中的数据。

希望这有帮助。

答案 1 :(得分:1)

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");

此外,您需要在单元格之前指定行以选择第一个单元格的特定单元格.i.e

document.getElementById("my-table").rows[0].cells[0]

答案 2 :(得分: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
});

答案 3 :(得分:0)

您可以将表格和单元格放到不同的变量中,以便于调试。 在此示例中,您需要为您的表定义一个ID名称,如<table id="tbl">

var table = document.getElementByID("tbl");
var d = table.getElementsByTagName("tr")[0],
var r = d.getElementsByTagName("td")[0];