如何使用 Javascript 和 HTML 将链接嵌入到表中的值中答案

【问题标题】：How to embed the link into value in a table using Javascript and HTML如何使用 Javascript 和 HTML 将链接嵌入到表中的值中
【发布时间】：2020-03-18 06:24:23
【问题描述】：

我的脚本如下所示。有一个包含 2 列（名称和 URL）的表。

如何使用第二列值（URL）嵌入名称（如超链接）？

另外，是否可以在一行中显示所有名称？（例如名称 1 名称 2 名称 3 ...）

这样，我可以单击名称并重定向到网站。

<!doctype 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<2; 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/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</head>
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1> 
<p><div id="data"/></p>
</body>
</html>

【问题讨论】：

运行代码会产生两个语法错误：Uncaught SyntaxError: Unexpected token '
好的。让我先改一下。
把你所有的java脚本代码放在body里面就可以了。检查我的答案
我已经修改了脚本，你可以运行它
Juhil，是否可以将 URL 嵌入到名称列中？

标签： javascript html json google-sheets

【解决方案1】：

调试你的代码，发现rowData可以为空，是一个数组。

在该数组中，您有几个不同的值。数组本身可以为空，仅包含非 url 值或包含 url。

我会首先确保您正确地从 rowData 获取所需的数据。

然后，在您的 drawCell 方法中，通过确定该值是否以 http/s 开头来确定该值是否为链接。

要创建锚元素，请执行以下操作：

let anchorElement = document.createElement("a");
anchorElement.setAttribute("href", YOUR_LINK);
td.append(anchorElement);

编辑

根据 OP 的最新评论，我正在添加请求的代码。

<!doctype 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);                  //CODE ADDED HERE
      if (val.indexOf("http") !== -1) {
          let anchorElement = document.createElement("a");
          anchorElement.setAttribute("href", val);
          anchorElement.innerHTML = "Link";
          td.append(anchorElement);
      } else {
         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<2; 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/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</head>
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1> 
<p><div id="data"/></p>
</body>
</html>

【讨论】：

行数据正确。我只想检索 Google 工作表中的 2 列。一个用于名称，一个用于 URL。
@Carlson - 你问过How to use second column value (URL) to embed in the name (like hyperlink)?。上面发布的答案显示了如何创建锚元素（超链接）。
您能帮忙发布整个代码吗？我是 javascript 新手。非常感谢。
@Carlson - 我已经更新了我的答案。如果它对您有帮助，请标记它。

【解决方案2】：

检查下面的代码，

<body>
<h1>Parse Google Spreadsheet with JavaScript</h1> 
<div id="data"></div>
<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<2; 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/1uwdoylX-De2A8XiIefAJqUBukpy8T2FAEraNN-PzCRE/1/public/values?alt=json-in-script&callback=doData"></script>
</body>

【讨论】：

你好，Juhil，它不起作用。结果和以前一样。