如何在Google Web应用中将文本更改为链接?

huangapple go评论68阅读模式
英文:

How to change text to link in google web app?

问题

这是您提供的代码的翻译部分:

所以我有一个包含我们项目中使用的所有电子表格的列表
电子表格中的简单表格带有指向其他电子表格的链接我想将它变成一个网站所以我编写了一个简单的代码并部署了它我遇到的问题是网站上的链接只是普通文本那么我该如何将它们变成链接

你有任何想法如何解决这个问题吗

GASGoogle Apps Script代码

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function getData(){
  const ss = SpreadsheetApp.openByUrl('**********************');
  const srcSheet = ss.getSheetByName("Sheet1");
  const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues();

  return srcValues;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
 
    <script>
  
  google.script.run.withSuccessHandler(showData).getData();
 
  function showData(dataArray){
    $(document).ready(function(){
      $('#data-table').DataTable({
        data: dataArray,
       
        columns: [
          {"title":"文件"},
          {"title":"内容"},
          {"title":"链接"},
          {"title":"联系方式"}
         
        ]
      });
    });
  }
  </script>
  
  </head>
 
   <body>

<!--- 表格---->
    <div class="container center">
      <br>
      <div class="row center">
        <table id="data-table" class="table table-striped table-sm table-hover table-bordered">
          <!-- 表格数据由上面的 showData() JavaScript 函数添加 -->
        </table>
      </div>
    </div>  
  </body>
</html>

希望这能帮助您理解代码的内容。如果您有其他问题,请随时提出。

英文:

So I have spreadsheet with list of all spreadsheets we use for the project.
Simple table in spreadsheet with links to other spreadsheet. I wanted to have it as a website so I create a simple code and deployed. The problem I have is that links are regular text on the website so how could I change them to links?

do you have any ideas how it could be solved?

GAS:

  function doGet() {
return HtmlService.createTemplateFromFile(&#39;Index&#39;).evaluate();
}
function getData(){
const ss = SpreadsheetApp.openByUrl(&#39;**********************&#39;);
const srcSheet = ss.getSheetByName(&quot;Sheet1&quot;);
const srcValues = srcSheet.getRange(2, 1, srcSheet.getLastRow()-1, 4).getDisplayValues()
return srcValues;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}

HTML:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;base target=&quot;_top&quot;&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css&quot;&gt;
&lt;script&gt;
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
$(document).ready(function(){
$(&#39;#data-table&#39;).DataTable({
data: dataArray,
columns: [
{&quot;title&quot;:&quot;File&quot;},
{&quot;title&quot;:&quot;Content&quot;},
{&quot;title&quot;:&quot;Link&quot;},
{&quot;title&quot;:&quot;Contact&quot;}
]
});
});
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!--- TABLE----&gt;
&lt;div class=&quot;container center&quot;&gt;
&lt;br&gt;
&lt;div class=&quot;row center&quot;&gt;
&lt;table id=&quot;data-table&quot; class=&quot;table table-striped table-sm table-hover table-bordered&quot;&gt;
&lt;!-- TABLE DATA IS ADDED BY THE showData() JAVASCRIPT FUNCTION ABOVE --&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;  
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 2

在你的脚本中,如何使用render?在这种情况下,请按照以下方式修改你的JavaScript。

从:

columns: [
  {&quot;title&quot;:&quot;File&quot;},
  {&quot;title&quot;:&quot;Content&quot;},
  {&quot;title&quot;:&quot;Link&quot;},
  {&quot;title&quot;:&quot;Contact&quot;}
]

到:

columns: [
  {&quot;title&quot;:&quot;File&quot;},
  {&quot;title&quot;:&quot;Content&quot;},
  {&quot;title&quot;:&quot;Link&quot;, &quot;render&quot;: e =&gt; `&lt;a href=&quot;${e}&quot; target=&quot;_blank&quot;&gt;${e}&lt;/a&gt;`},
  {&quot;title&quot;:&quot;Contact&quot;}
]
  • 根据你的脚本,我猜测列"C"是超链接。

参考链接:

英文:

In your script, how about using render? In this case, please modify your Javascript as follows.

From:

columns: [
{&quot;title&quot;:&quot;File&quot;},
{&quot;title&quot;:&quot;Content&quot;},
{&quot;title&quot;:&quot;Link&quot;},
{&quot;title&quot;:&quot;Contact&quot;}
]

To:

columns: [
{&quot;title&quot;:&quot;File&quot;},
{&quot;title&quot;:&quot;Content&quot;},
{&quot;title&quot;:&quot;Link&quot;, &quot;render&quot;: e =&gt; `&lt;a href=&quot;${e}&quot; target=&quot;_blank&quot;&gt;${e}&lt;/a&gt;`},
{&quot;title&quot;:&quot;Contact&quot;}
]
  • From your script, I guessed that the column "C" is the hyperlink.

Reference:

huangapple
  • 本文由 发表于 2023年4月4日 15:33:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/75926643.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定