Как встроить ссылку в значение в таблице, используя Javascript и HTML - PullRequest
Новая
       1

Как встроить ссылку в значение в таблице, используя Javascript и HTML

0 голосов
/ 18 марта 2020

Мой скрипт показан ниже. Существует таблица с 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>

Ответы [ 2 ]

1 голос
/ 18 марта 2020

Отлаживая ваш код, я обнаружил, что rowData может быть пустым и представляет собой массив.

Внутри этого массива у вас есть несколько различных значений. Сам массив может быть пустым, содержать только значения, отличные от URL, или содержать URL.

Сначала я должен убедиться, что вы правильно получаете данные из rowData.

Затем в вашем методе drawCell Узнайте, является ли значение ссылкой, выяснив, начинается ли оно с http / s.

Чтобы создать элемент привязки, выполните следующие действия: 

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

EDIT

В последнем комментарии 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>
0 голосов
/ 18 марта 2020

Проверьте код ниже, 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...