使用纯 JavaScript 获取 HTML 表格中特定单元格的值答案

【问题标题】：Get value of a specific cell in HTML table with pure JavaScript使用纯 JavaScript 获取 HTML 表格中特定单元格的值
【发布时间】：2020-01-06 10:01:12
【问题描述】：

我有通过 HTTP 请求获取一些数据的 React 应用程序。响应内容包含一个格式化的 HTML 表格，如下所示：

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

我有一个组件，它使用一种方法从响应中提取一个值。我需要的值在表中的第二个 <td> 元素中 (<td>1165</td>)。

方法如下：

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

我需要将第二个 <td> 元素的值存储到名为“id”的变量的纯 JavaScript 代码。 'response' 变量包含上面显示的原始 HTML，我需要的 id 始终是第二个 <td> 元素。

编辑：我需要解析在响应参数中传递的文本。文本包含 HTML 代码，但不会在页面的任何位置呈现。

【问题讨论】：

到目前为止你做了什么？
Parse an HTML string with JS的可能重复
@Maxime Girou 什么都没有，但我只需要以某种方式将第二个 <td> 元素的值提取到变量（第二个块中缺少代码部分）。第一个代码块是“响应”参数的内容。

标签： javascript html reactjs html-parsing

【解决方案1】：

我不知道我是否理解您的问题，但您可以通过下面的代码获得价值。

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

【讨论】：

谢谢，这很接近，但该表并未呈现在文档中的任何位置，它包含在“响应”变量（getId 方法的参数）中作为原始文本。我需要解析文本，而不是 HTML 元素。
好的，你可以用这个将文本解析为html，var html = document.createElement('text');

【解决方案2】：

您可以使用正则表达式从 HTML 响应中提取第二个值。

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

【讨论】：