javascript - 将 CSV 内容显示为 HTML 网站中的 url 链接和图片？

Question

我有一个包含很多链接的 CSV 文件，我想在表格中将它们显示为超链接，而不是纯文本。 csv 文件还包含照片链接，因此我希望它直接在网站中显示图像。这可能吗？

我已经使用下面的代码成功在表格中显示了我想要的所有内容。

function init_table(options) {

  options = options || {};
  var csv_path = options.csv_path || "";
  var el = options.element || "table-container";
  var allow_download = options.allow_download || false;
  var csv_options = options.csv_options || {};
  var datatables_options = options.datatables_options || {};

  $("#" + el).html("<table class='table table-striped table-condensed' id='my-table'></table>");

  $.when($.get(csv_path)).then(
    function(data){

      data = data.replace(/[\r|\r\n]/g, "\n");

      var csv_data = $.csv.toArrays(data, csv_options);

      var table_head = "<thead><tr>";

      for (head_id = 0; head_id < csv_data[0].length; head_id+=2) { 
        table_head += "<th>" + csv_data[0][head_id] + "</th>";
      }

      table_head += "</tr></thead>";
      $('#my-table').append(table_head);
      $('#my-table').append("<tbody></tbody>");

      for (row_id = 1; row_id < csv_data.length; row_id++) { 
        var row_html = "<tr>";

          for (col_id = 0; col_id < csv_data[row_id].length; col_id+=2) {
              switch (col_id) {
                // img
                case 1:
                  row_html += '<td><img src="' + csv_data[row_id][col_id] + '" /></td>';
                  break;
                // link
                case 3:
                  row_html += '<td><a href="' + csv_data[row_id][col_id] + '">' + csv_data[row_id][col_id] + '</a></td>';
                  break;
                default:
                  row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
              }
          }
        row_html += "</tr>";
        $('#my-table tbody').append(row_html);
      }

      $("#my-table").DataTable(datatables_options);

      if (allow_download)
        $("#" + el).append("<p><a class='btn btn-info' href='" + csv_path + "'><i class='glyphicon glyphicon-download'></i> Download as CSV</a></p>");
    });
}

有人可以帮我做什么吗？我确实需要显示网站中的所有图片，并使链接可点击。

我知道这需要大量更改代码，但我不知道如何开始我正在尝试创建的内容..

提前非常感谢您!

Answer 1

这样的事情可能会帮助你......

// process columns
for (col_id = 0; col_id < csv_data[row_id].length; col_id++) {
    switch (col_id) {
      // img
      case 1:
        row_html += '<td><img src="' + csv_data[row_id][col_id] + '" /></td>';
        break;

      // link
      case 3:
        row_html += '<td><a href="' + csv_data[row_id][col_id] + '">' + csv_data[row_id][col_id] + '</a></td>';
        break;

      default:
        row_html += "<td>" + csv_data[row_id][col_id] + "</td>";
    }
}