5 

<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>

I have the above code snippet which creates a table. I want to extract the MARkS from the table and store it in an array.

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

gives output as UNDEFINED

So how can I do so?

NOTE: I cannot edit the html of the page.

Improve this question
3
  • it is very basic level question. I would suggest you to first go with jQuery function like parent, children, sibling, find which can do your job easily. See api.jquery.com/children Commented Jan 30, 2016 at 10:18
  • 5
    @yogihosting Pretty bad advice. It makes sense to touch jQuery when OP can do it without it. Commented Jan 30, 2016 at 10:20
  • getElementsByTagName return an array. Commented Jan 30, 2016 at 14:13

4 Answers 4

Reset to default
2

To access column number 3 you will need only few changes. First is to add id for a table:

<table id="table1" ...>

Second changing JavaScript code to:

var table1 = document.getElementById("table1")
for(var i = 0; i < table1.rows.length; i++) {
    var cell_value = table.rows[i].cells[3].textContent;
}

You can then use cell_value

or simply use document.getElementById("table1").rows[i].cells[j].textContent and i will be your desired row and j your column (in this case number 3):

document.getElementById("table1").rows[0].cells[3].textContent

To avoid header and footer (if existing in table as <thead> or <tfoot>) you need to change loop:

for(var i = 1; i < table1.rows.length - 1; i++) { ...

i = 1 for the header, table1.rows.length - 1 for the footer.

If you can not add id="" to table, you can try using this JavaScript code:

var cell_value = document.getElementsByTagName("table")[0].rows[0].cells[3].textContent;

document.getElementsByTagName("table")[0] is your table with index [0], so it is first table in the document body, then rows[0] means it is first row, and cells[3] means it is fourth column, and textContent will extract data from the cell for you.

Hope this helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Close, but you need to exclude header and footer.
Yes, @dfsq you are right. Thanks. I am editing my answer.
@KamilWozniak semantically u are not wrong. not all tables have headers and footers
@JacobGeorge thanks, my answer was ok for the exact case, but now is more complex, let's say if author want to add header or footer, it will be more helpful.
the footer don't necessarily is at the end of the table it can be after the header. Better use rows = table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
1 
document.getElementsByTagName("table")

returns an array of DOM elements. It will be hard to figure out your table from the array list.

the best way to select a table would be to associate an id with it and use document.getElementById

<table  id="my-table" border="1" cellpadding="2" cellspacing="0" width="75%" bordercolor="#000000">

Javascript:

document.getElementById("my-table");

Also, you need to specify the rows before the cells to select a particular cell, .i.e, for the first cell

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

Comments

0

This solution is work:

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
});
Improve this answer

Comments

0

You can put the table and cells to different variables for easier debug. In this sample you need to define an id name for your table like this <table id="tbl">

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.