CODEWITHSUNDEEP
javascripthtml
user5852923
user5852923

Reputation:

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

Upvotes: 5

Views: 1430

Answers (4)

Kamil Wozniak
Kamil Wozniak

Reputation: 445

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.

Upvotes: 2

yottanami
yottanami

Reputation: 377

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

Upvotes: 0

Jacob George
Jacob George

Reputation: 2627

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]

Upvotes: 1

Vasim Shaikh
Vasim Shaikh

Reputation: 4542

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

Upvotes: 0

Related Questions