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>

我不确定如何将两个javascripts组合起来通过按钮将用户选择的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);

将特定的csv文件读入html

2 个答案: