Get value of a specific cell in HTML table with pure JavaScript

Question

I have React application that fetches some data with HTTP request. Response content contains a formatted HTML table and looks like this:

<html>
  <head>
    <title>Geoserver GetFeatureInfo output</title>
  </head>
  <style type="text/css">
    table.featureInfo, table.featureInfo td, table.featureInfo th {
        border:1px solid #ddd;
        border-collapse:collapse;
        margin:0;
        padding:0;
        font-size: 90%;
        padding:.2em .1em;
    }
    table.featureInfo th {
        padding:.2em .2em;
        font-weight:bold;
        background:#eee;
    }
    table.featureInfo td{
        background:#fff;
    }
    table.featureInfo tr.odd td{
        background:#eee;
    }
    table.featureInfo caption{
        text-align:left;
        font-size:100%;
        font-weight:bold;
        padding:.2em .2em;
    }
  </style>
  <body>

<table class="featureInfo">
  <caption class="featureInfo">v_zgrada_gs</caption>
  <tr>
  <th>fid</th>
    <th >id</th>
    <th >parcela_id</th>
    <th >kc_broj</th>
    <th >ko_id</th>
    <th >ko</th>
    <th >zk_ulozak</th>
    <th >vrsta_id</th>
    <th >vrsta_zgrade</th>
    <th >izvor</th>
    <th >etaziranost</th>
    <th >uskladjeno</th>
    <th >kbr</th>
    <th >opis</th>
    <th >broj_katova</th>
    <th >povrsina_sluzbena</th>
    <th >povrsina</th>
    <th >godina_izgradnje</th>
    <th >izvor_podataka_id</th>
    <th >nedovrseno</th>
  </tr>

    <tr>

  <td>v_zgrada_gs.fid-752e8cc0_16cf6d070ba_-7146</td>    
      <td>1165</td>
      <td>10642</td>
      <td>1002/7</td>
      <td>3</td>
      <td>Novalja</td>
      <td>417</td>
      <td>2</td>
      <td>kuća</td>
      <td>DKP</td>
      <td>false</td>
      <td>false</td>
      <td></td>
      <td></td>
      <td>2.0</td>
      <td></td>
      <td>110.8</td>
      <td></td>
      <td>2</td>
      <td>false</td>
  </tr>
</table>
<br/>

  </body>
</html>

I have a component that uses a method to extract one value from response. The value I need is in second <td> element in table (<td>1165</td>).

The method looks like this:

getId = (response) => {
        /* 
            Missing code here
        */
        return id;
    }

I need pure JavaScript code that stores value of second <td> element to variable named 'id'. 'response' variable contains raw HTML shown above, and the id I need is always second <td> element.

EDIT: I need to parse text that is passed in response argument. Text contains HTML code, but it is not rendered anywhere on page.

Possible duplicate of [Parse an HTML string with JS](https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js) — , Sep 03 '19 at 13:26
@Maxime Girou Nothing, but I just need to somehow extract value of second `` element to variable (missing code part in second block). First code block is content of 'response' argument. — Marin Leontenko, Sep 03 '19 at 13:27

score 1 · Answer 1 · answered Sep 03 '19 at 13:29

1

I dont know if i'm understanding your problem but you can get the value with the code bellow.

var id = document.getElementsByTagName('tr')[1].getElementsByTagName('td')[2].innerText

answered Sep 03 '19 at 13:29

Pedro Brito

263
1
9

Thanks, this is close, but that table is not rendered anywhere in document, it is contained in 'response' variable (argument of getId method) as raw text. I need to parse text, not HTML elements. – Marin Leontenko Sep 03 '19 at 13:35
Ok, you can parse the text as html with this, var html = document.createElement( 'text' ); – Pedro Brito Sep 03 '19 at 13:39

score 1 · Accepted Answer · answered Sep 03 '19 at 13:35

1

You can use a regular expression to extract the 2nd value from your HTML response.

var pattern = /<td>.*?<\/td>.*?<td>(.*?)<\/td>/s; // flag s = dot matches new line
var m = response.match(pattern);
console.log(m[1]); // prints "1165"

answered Sep 03 '19 at 13:35

Guillaume Adam

191
2
10

Get value of a specific cell in HTML table with pure JavaScript

2 Answers2

Linked