将特定的 csv 文件读入 html

Question

我目前正在尝试根据用户选择选择特定的 csv 文件，然后单击按钮将其显示为网页中的 html 表格。

这需要执行的步骤是： 从下拉列表中选择用于识别 csv 文件名的选项 将 csv 文件名传递给将其显示为 html 表的函数 在单击按钮时执行此操作，而不是在网页加载时执行此操作

下面是我到目前为止的代码，代码的第一部分标识了 csv 文件名。 第二部分读入一个硬编码的 csv 文件，并将其解析为一个 html 表格，该表格在网页打开时显示。

<script> 
   function button_clicked(){ 
   var obj_opt = document.getElementById("opt"); 
   var opt = obj_opt.value; 
   if (opt==""){ 
   alert("Please select Option1"); 
   return; 
   } 
   var obj_opt_two = document.getElementById("opt_two"); 
   var opt_two = obj_opt_two.value; 
   if (opt_two==""){ 
   alert("Please select Option2"); 
   return; 
   } 
   var urls= "http://mysite/" + opt + "_" + opt_two + ".csv";  
   alert("The link is: " + urls);
   }
</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<script>
  function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

$.ajax({
    type: "GET",
    url: "http://mysite/Option1_Option2.csv",
    success: function (data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
    }
});
</script>

<button type="button" onClick="button_clicked()">Load New File</button>

我不确定如何组合这两个 javascript 以通过按钮将用户选择的 csv 作为表格加载，任何有关如何执行此操作的帮助将不胜感激！

Answer 1

要完成这项工作，您需要将$.ajax 逻辑移动到按钮单击处理程序中，并将url 值应用于它。

还请注意，在 HTML 中使用 on* 事件属性非常过时，应尽可能避免使用。您应该改用不显眼的事件处理程序。由于您已经在页面中包含了 jQuery，您可以使用它：

$(function() {
  $('#load').click(function() {
    var opt = $("#opt").val();
    if (!opt) {
      alert("Please select Option1");
      return;
    }

    var opt_two = $("#opt_two").val();
    if (!opt_two) {
      alert("Please select Option2");
      return;
    }

    $.ajax({
      type: "GET",
      url: `http://mysite/${opt}_${opt_two}.csv`,
      success: function(data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
      }
    });
  });

  function arrayToTable(tableData) {
    var html = tableData.map(function(row) {
      var rowHtml = '<tr>';
      row.forEach(function(cell) {
        rowHtml += `<td>${cell}</td>`;
      });
      return rowHtml + '</tr>';
    });
    return `<table>${html.join('')}</table>`;
  }
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<button type="button" id="load">Load New File</button>

最后，请注意 jQuery 1.7 现在已经相当老了。如果您仍然需要支持旧版 IE 浏览器，我建议升级到 1.12，如果不需要，建议升级到 3.2.1。

Answer 2

移动

$.ajax({
    type: "GET",
    url: "http://mysite/Option1_Option2.csv",
    success: function (data) {
        $('body').append(arrayToTable(Papa.parse(data).data));
    }
});

代替

alert("The link is: " + urls);