GAS，Bootstrap Web 表格在表格中搜索并显示数据，但它不显示链接或超链接以单击它们（来自电子表格）

Question

Here is the web app这是 web 应用程序

https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec

Any idea on how could I make it show up the links or hyperlinks some cells have?关于如何让它显示某些单元格的链接或超链接的任何想法？

I have made this web form mainly following a tutorial so I'm somewhat new, I try to understand most of the code but truly it's quite hard for me so if this is something that's too hard for a noob to handle I understand我主要按照教程制作了这个 web 表格，所以我有点新，我尝试理解大部分代码，但确实对我来说很难，所以如果这对于菜鸟来说太难处理了，我明白

And here is the code code.gs这是代码code.gs

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


/* PROCESS FORM */
function processForm(formObject){  
  var result = "";
  if(formObject.searchtext){//Execute if form passes search text
      result = search(formObject.searchtext);
  }
  return result;
}

//SEARCH FOR MATCHED CONTENTS 
function search(searchtext){
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!
  var data = Sheets.Spreadsheets.Values.get(spreadsheetId, dataRage).values;
  var ar = [];
  
  data.forEach(function(f) {
    if (~f.indexOf(searchtext)) {
      ar.push(f);
    }
  });
  return ar;
}

And the 2nd file第二个文件

Index HTML file索引 HTML 文件

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
        
        <!--##JAVASCRIPT FUNCTIONS ---------------------------------------------------- -->
        <script>
          //PREVENT FORMS FROM SUBMITTING / PREVENT DEFAULT BEHAVIOUR
          function preventFormSubmit() {
            var forms = document.querySelectorAll('form');
            for (var i = 0; i < forms.length; i++) {
              forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
              });
            }
          }
          window.addEventListener("load", preventFormSubmit, true); 
             
          
          //HANDLE FORM SUBMISSION
          function handleFormSubmit(formObject) {
            google.script.run.withSuccessHandler(createTable).processForm(formObject);
            document.getElementById("search-form").reset();
          }
        
          //CREATE THE DATA TABLE
          function createTable(dataArray) {
            if(dataArray && dataArray !== undefined && dataArray.length != 0){
              var result = "<table class='table table-sm table-striped' id='dtable' style='font-size:0.8em'>"+
                           "<thead style='white-space: nowrap'>"+
                             "<tr>"+                               //Change table headings to match witht he Google Sheet
                              "<th scope='col'>ORDERNUMBER</th>"+
                              "<th scope='col'>QUANTITYORDERED</th>"+
                              "<th scope='col'>PRICEEACH</th>"+
                              "<th scope='col'>ORDERLINENUMBER</th>"+
                              "<th scope='col'>SALES</th>"+
                              "<th scope='col'>ORDERDATE</th>"+
                              "<th scope='col'>STATUS</th>"+
                              "<th scope='col'>QTR_ID</th>"+
                              "<th scope='col'>MONTH_ID</th>"+
                              "<th scope='col'>YEAR_ID</th>"+
                              "<th scope='col'>PRODUCTLINE</th>"+
                              "<th scope='col'>MSRP</th>"+
                              "<th scope='col'>PRODUCTCODE</th>"+
                              "<th scope='col'>CUSTOMERNAME</th>"+
                              "<th scope='col'>PHONE</th>"+
                              "<th scope='col'>ADDRESSLINE1</th>"+
                              "<th scope='col'>ADDRESSLINE2</th>"+
                              "<th scope='col'>CITY</th>"+
                              "<th scope='col'>STATE</th>"+
                              "<th scope='col'>POSTALCODE</th>"+
                              "<th scope='col'>COUNTRY</th>"+
                              "<th scope='col'>TERRITORY</th>"+
                              "<th scope='col'>CONTACTLASTNAME</th>"+
                              "<th scope='col'>CONTACTFIRSTNAME</th>"+
                              "<th scope='col'>DEALSIZE</th>"+
                            "</tr>"+
                          "</thead>";
              for(var i=0; i<dataArray.length; i++) {
                  result += "<tr>";
                  for(var j=0; j<dataArray[i].length; j++){
                      result += "<td>"+dataArray[i][j]+"</td>";
                  }
                  result += "</tr>";
              }
              result += "</table>";
              var div = document.getElementById('search-results');
              div.innerHTML = result;
            }else{
              var div = document.getElementById('search-results');
              //div.empty()
              div.innerHTML = "Data not found!";
            }
          }
        </script>
        <!--##JAVASCRIPT FUNCTIONS ~ END ---------------------------------------------------- -->
        
    </head>
    <body>
        <div class="container">
            <br>
            <div class="row">
              <div class="col">
            
                  <!-- ## SEARCH FORM ------------------------------------------------ -->
                  <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
                    <div class="form-group mb-2">
                      <label for="searchtext">Search Text</label>
                    </div>
                    <div class="form-group mx-sm-3 mb-2">
                      <input type="text" class="form-control" id="searchtext" name="searchtext" placeholder="Search Text">
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">Search</button>
                  </form>
                  <!-- ## SEARCH FORM ~ END ------------------------------------------- -->
              
              </div>    
            </div>
            <div class="row">
              <div class="col">
            
                <!-- ## TABLE OF SEARCH RESULTS ------------------------------------------------ -->
                <div id="search-results" class="table-responsive">
                  <!-- The Data Table is inserted here by JavaScript -->
                </div>
                <!-- ## TABLE OF SEARCH RESULTS ~ END ------------------------------------------------ -->
                  
              </div>
            </div>
        </div>
    </body>
</html>

Sample Data样本数据

Photoshopped output Photoshop 的 output

Answer 1

I believe your goal as follows.我相信你的目标如下。

You want to convert the images from Sample Data to Photoshopped output in your question.您想在您的问题中将图像从Sample Data转换为Photoshopped output 。
The column "K" has the hyperlinks and you want to set the hyperlinks to the HTML side. “K”列有超链接，您想将超链接设置到 HTML 端。

Modification points:修改点：

When I saw your script, Sheets.Spreadsheets.Values.get is used.当我看到您的脚本时，使用了Sheets.Spreadsheets.Values.get 。 In this case, unfortunately, the hyperlinks cannot be directly retrieved.不幸的是，在这种情况下，无法直接检索超链接。
In this case, I would like to propose the following flow.在这种情况下，我想提出以下流程。
1. Retrieve values from the column "K" and retrieve the URLs with getRichTextValues .从“K”列中检索值并使用getRichTextValues检索 URL。
2. Create an array for returning to Javascript side.创建一个返回到 Javascript 端的数组。

When above points are reflected to your script, it becomes as follows.当以上几点反映到您的脚本时，它变成如下。

Modified script:修改后的脚本：

Please modify the function search in Google Apps Script side as follows.请在 Google Apps Script 端修改 function search如下。

function search(searchtext) {
  var spreadsheetId   = '1xsSrUT8jYm9dT_Mfi2UTy4BHjcD7TQVVtgsB1x1wgTE'; //** CHANGE !!!
  var dataRage        = 'Data!A2:Y';                                    //** CHANGE !!!

  // 1. Retrieve values from the column "K" and retrieve the URLs with getRichTextValues.
  var ss = SpreadsheetApp.openById(spreadsheetId);
  var [sheetName, a1Notation] = dataRage.split("!");
  var sheet = ss.getSheetByName(sheetName);
  var lastRow = sheet.getLastRow();
  var range = sheet.getRange(a1Notation + lastRow);
  var richTextValues = range.offset(0, 10, lastRow, 1).getRichTextValues().map(([k]) => {
    var url = k.getLinkUrl();
    var text = k.getText();
    return url ? `<a href="${url}">${text}</a>` : text;
  });

  // 2. Create an array for returning to Javascript side.
  var values = range.getDisplayValues().reduce((ar, r, i) => {
    if (r.includes(searchtext)) {
      r[10] = richTextValues[i];
      ar.push(r);
    }
    return ar;
  }, []);
  return values;
}

Note:笔记：

When you modified the Google Apps Script, please modify the deployment as new version.当您修改 Google Apps 脚本时，请将部署修改为新版本。 By this, the modified script is reflected to Web Apps.这样，修改后的脚本就会反映到 Web 应用程序中。 Please be careful this.请注意这一点。
You can see the detail of this at the report of " Redeploying Web Apps without Changing URL of Web Apps for new IDE ". You can see the detail of this at the report of " Redeploying Web Apps without Changing URL of Web Apps for new IDE ".
I proposed above modified script using your sample input and output images.我使用您的示例输入和 output 图像提出了上述修改后的脚本。 So, when your actual situation is different from it, the script might not be able to be used.因此，当您的实际情况与其不同时，脚本可能无法使用。 Please be careful this.请注意这一点。

References:参考：

getRichTextValues() 获取富文本值（）
getLinkUrl() 获取链接网址（）

GAS，Bootstrap Web 表格在表格中搜索并显示数据，但它不显示链接或超链接以单击它们（来自电子表格）

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-15 02:46:24

Modification points:修改点：

Modified script:修改后的脚本：

Note:笔记：

References:参考：

GAS，Bootstrap Web 表格在表格中搜索并显示数据，但它不显示链接或超链接以单击它们（来自电子表格）

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-15 02:46:24

Modification points:修改点：

Modified script:修改后的脚本：

Note:笔记：

References:参考：

解决方案1
1 已采纳 2021-06-15 02:46:24