Как сделать мои ссылки в CSV кликабельными в HTML?

-2

У меня есть файл csv, который загружает мои данные динамически, но по какой-то причине мои ссылки не могут быть доступны клиенту в файле HTML.

Вот содержимое моего файла csv:

ID,City,Website,ZipCode 
1,Florida,https://www.test.com,33601 
2,Ohio,https://www.test.com,55555 
3,Indiana,https://www.test.com,46032

и вот мой код, который у меня есть до сих пор:

 <!DOCTYPE html>
 <html lang="en" >

 <head>
 <meta charset="UTF-8">
 <script src='jquery.min.js'> </script>
 <title>Parsing CSV Files</title>
 <script>

    (function($) {

  //$(document).ready(function() {

 'use strict';

  $.ajax({
  url: 'csv_data.csv',
  dataType: 'text',
  }).done(successFunction);

  function successFunction(data) {
  var allRows = data.split(/\r?\n|\r/);
  var table = '<table>';
  for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
  if (singleRow === 0) {
    table += '<thead>';
    table += '<tr>';
  } else {
    table += '<tr>';
  }
  var rowCells = allRows[singleRow].split(',');
  var a = $('#test').text();
  document.getElementById("test").innerHTML = a;
  for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
    if (singleRow === 0) {
      table += '<th>';
      table += rowCells[rowCell];
      table += '</th>';
    } else if(rowCells[0]==a){
      table += '<td>';
      table += rowCells[rowCell];
      table += '</td>';
    }
  }
  if (singleRow === 0) {
    table += '</tr>';
    table += '</thead>';
    table += '<tbody>';
    } else {
    table += '</tr>';
   }
  }
  table += '</tbody>';
  table += '</table>';
  $('body').append(table);
  }

  // });

  })(jQuery);
  </script>
  </head>

  <body>
  <pan id="test">2</span>
  </body>

Прямо сейчас мои ссылки - это только статический текст, когда данные загружаются в файл HTML. Как я мог бы сделать их кликабельными в зависимости от того, что у меня есть в моем файле csv?

  • 0
    Похоже, OP просто хочет, чтобы мы сделали его домашнюю работу - я имею в виду, давай, это глупое задание ... ты знаешь, как создавать тд, но не ссылку. ПОГУГЛИ ЭТО.
Теги:

1 ответ

2
Лучший ответ

Просто поместите свой последний столбец в тег <a>. Отдельно для 3d-ячейки (rowCell==2) вам нужно немного другое дополнение:

table += '<td><a href="';
table += rowCells[rowCell]; //The actual link
table += '">';
table += rowCells[rowCell]; //What displayed on screen, could be changed
table += '</a></td>';

Вторая rowCell - это то, что отображается на экране - вы можете отобразить отредактированную версию URL-адреса, если хотите.

Один из способов реализовать это, оставив остальную часть вашего кода, изменится:

} else if(rowCells[0]==a){
  table += '<td>';
  table += rowCells[rowCell];
  table += '</td>';
}

в

} else if(rowCells[0]==a) {
     table += '<td>';
     if (rowCell == 2) table += '<a href="'
     table += rowCells[rowCell];     
     if (rowCell == 2) {
         table += '">';   
         table += rowCells[rowCell]; //This can be changed to table += 'click here!';
         table += '</a>';
     }  
     table += '</td>';
}
Поделиться
  • 0
    Какую часть кода мне нужно отредактировать?
  • 0
    @ user3683976 отредактированный ответ с одним вариантом.
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню