如何使用 javascript 查询 AJAX 导入的表（而不是本地表）答案

【问题标题】：How to query an AJAX imported table (instead of a local table) using javascript如何使用 javascript 查询 AJAX 导入的表（而不是本地表）
【发布时间】：2020-02-27 18:09:30
【问题描述】：

目前，我有一个脚本可以搜索本地存储表的第 1 列，并从同一行的第 2 列返回结果。根据该结果，它会在控制台中记录一些内容。

这里是行动。它在表的第 1 列中搜索“dragon”，从第 2 列返回“2”，然后脚本记录“结果为 2”。到控制台。

var username = 'dragon'
const searchDataSetByKey = (dataSet, key) => {
  return dataSet.find((data) => data[0] === key)
}
document.addEventListener('DOMContentLoaded', () => {
  var tableToArray = Array
  .from(document.querySelectorAll('tr'))
  .reduce((_tableToArray, tableRow, tableRowIndex) => {
    if(tableRowIndex !== 0) {
      var tableData = tableRow.querySelectorAll('td')
      var key = tableData.item(0).innerText
      var value = tableData.item(1).innerText
      _tableToArray.push([key, value])
    }
    return _tableToArray
  }, [])
  var searchString = searchDataSetByKey(tableToArray,username).toString()
var oneSearch = searchString.indexOf("1")
var twoSearch = searchString.indexOf("2")
var threeSearch = searchString.indexOf("3")
if (oneSearch >= 0) {
console.log('The result is one!');}
else if (twoSearch >= 0) {
  console.log('This result is two.');}
  else if (threeSearch >= 0) {
  console.log('The answer is three! :)');}
})

<html>
  <script src="script.js"></script>
  <body>
    <table>
      <tr>
        <th>Username</th>
        <th>1/2/3</th>
      </tr>
      <tr>
        <td>wisp</td>
        <td>1</td>
      </tr>
      <tr>
        <td>husky</td>
        <td>2</td>
      </tr>
      <tr>
        <td>dragon</td>
        <td>2</td>
      </tr>
      <tr>
        <td>woop</td>
        <td>3</td>
      </tr>
      <tr>
        <td>e6</td>
        <td>1</td>
      </tr>
    </table>
  </body>
</html>

这对于本地存储的表非常有用。问题是，我想从 Google 表格中获得相同的结果。我找到了一种使用 AJAX 将 Google 表格中的信息存储到 HTML 表格中的方法。可以在此处查看此代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var spData = null;
  function doData(json) {
      spData = json.feed.entry;
  }
  
  function drawCell(tr, val) {
      var td = $("<td/>");
      tr.append(td);
      td.append(val);
      return td;
  }
  function drawRow(table, rowData) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
	  var tr = $("<tr/>");
	  table.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawCell(tr, rowData[c]);
	  }
	  return tr;
  }
  
  function drawTable(parent) {
	  var table = $("<table/>");
	  parent.append(table);
	  return table;
  }
  
  function readData(parent) {
      var data = spData;
      var table = drawTable(parent);
      var rowData = [];
      
      for(var r=0; r<data.length; r++) {
          var cell = data[r]["gs$cell"];
          var val = cell["$t"];
          if (cell.col == 1) {
              drawRow(table, rowData);
              rowData = [];
          }
          rowData.push(val);
      }
      drawRow(table, rowData);
  }
  $(document).ready(function(){
      readData($("#data"));
  });

  </script>
<script src="https://spreadsheets.google.com/feeds/cells/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/1/public/values?alt=json-in-script&callback=doData"></script>
<style type="text/css" media="print">
  form {display: none;}
</style>
</head>
<body>
<div id="data"/>
</body>
</html>

我想知道是否有任何方法可以使用这个 AJAX 导入的 HTML 表来实现在本地 HTML 表中所做的事情？

谢谢！

【问题讨论】：

标签： javascript jquery html ajax google-sheets-api

【解决方案1】：

这与您需要做的工作完全相同，尽管时间不同 - 即响应不同的事件。在您加载表格后立即执行此操作，而不是在您从文档中收到 DOMContentLoaded 事件后立即执行此操作。这是另一种查找方式。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  var spData = null;
  function doData(json) {
      spData = json.feed.entry;
  }
  
  function drawCell(tr, val) {
      var td = $("<td/>");
      tr.append(td);
      td.append(val);
      return td;
  }
  function drawRow(table, rowData) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
	  var tr = $("<tr/>");
	  table.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawCell(tr, rowData[c]);
	  }
	  return tr;
  }
  
  function drawTable(parent) {
	  var table = $("<table/>");
	  parent.append(table);
	  return table;
  }
  
  function readData(parent) {
      var data = spData;
      var table = drawTable(parent);
      var rowData = [];
      
      for(var r=0; r<data.length; r++) {
          var cell = data[r]["gs$cell"];
          var val = cell["$t"];
          if (cell.col == 1) {
              drawRow(table, rowData);
              rowData = [];
          }
          rowData.push(val);
      }
      drawRow(table, rowData);
  }
  $(document).ready(function(){
      readData($("#data"));
      searchTable( 'dragon', document.querySelector('table') );
  });

  function searchTable(searchStr, target)
  {
        let rows = Array.from( target.querySelectorAll('tr') );
        rows.forEach( (row,idx,col) => {
                                let firstCell = row.querySelector('td').textContent;
                                if (firstCell == searchStr)
                                {
                                      let cell2 = row.querySelectorAll('td')[1].textContent;
                                      console.log(`${searchStr} found in row ${idx}`);
                                      console.log(`col 2 of row #${idx} is: ${cell2}`);
                                }
                          }
                    );
  }


  </script>
<script src="https://spreadsheets.google.com/feeds/cells/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/1/public/values?alt=json-in-script&callback=doData"></script>
<style type="text/css" media="print">
  form {display: none;}
</style>
</head>
<body>
<div id="data"/>
</body>
</html>

【讨论】：

这正是我想要的。非常感谢。我喜欢搜索数据的方法。更加清洁和高效。再次感谢！