将HTML内容显示为HTML网站中的网址链接和图片?

时间:2015-12-08 12:30:51

标签: javascript html image csv hyperlink

我有一个包含大量链接的CSV文件,我希望将它们显示在一个表中,而不是纯文本,而是超链接。 csv文件还包含照片链接,所以我希望它直接显示网站中的图像。这可能吗?

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

This is what I have at the moment.

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>");
    });
}

有人可以帮我做点什么吗? 我真的需要在网站上显示所有图片,并使链接可以点击。

我知道这需要更改代码,但我无法弄清楚如何开始我想要创建的代码..

非常感谢您提前!

1 个答案:

答案 0 :(得分: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>";
    }
}