javascript - jQuery removeClass 触发，但不删除类

Question

我正在为表单中的一些文本输入使用日期选择器脚本。表单位于由表格中的按钮触发的模态中。我在使用导出到 csv 脚本时遇到问题，日期选择器出现在我的 csv 中并破坏了内容。

所以我认为，最简单的解决方案是在导出时删除日期选择器类，但这不起作用。

我已经在 jQuery 代码中添加了一个警报，以确保它的均匀触发。果然如此。由于某种原因，它只是不会删除该类。关于如何修复 removeClass 的任何建议，或者更好的是，如何确保日期选择器不显示在我的 csv 中。

这是表单所在的模态:

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
  <div class="modal-dialog controls" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title bold" id="controlsModalLabel">Edit Entry</h4>
      </div>
      <div class="modal-body">
        <h3 class="center">You are about to edit entry for</h3><br/>
        <h3 class="alert login"></h3>
        <form class="smallForm" method="POST" action="/staffmanager/loa_accom_update">
          <input id="_csrf" type="text" name="_csrf" hidden="hidden"/>
          <input class="la_id form-control" type="hidden" name="la_id"/>
          <label class="bold">Start date:</label>
          <input class="start_date date datepicker form-control" type="text" name="start_date" autocomplete="off" required="required"/><br/>
          <label class="bold">End date:</label>
          <input class="end_date date datepicker form-control" type="text" autocomplete="off" name="end_date"/><br/>
          <label class="bold">SIM link:</label>
          <input class="sim form-control" type="text" name="sim" autocomplete="off" required="required"/><br/>
          <label class="bold">Notes:</label>
          <textarea class="note form-control" type="textarea" name="note" autocomplete="off"></textarea>
          <div class="modal-footer">
            <button class="btn btn-default" type="button" data-dismiss="modal">Cancel</button>
            <button class="btn btn-success" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

j查询代码:

$('#export').on('click', function(){
  $('.date').removeClass('datepicker');
});

将表导出到 csv 脚本:

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tbody tr,table thead tr");

    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td,th");

        for (var j = 2; j < cols.length; j++) 
            row.push(cols[j].innerText.trim());

        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename+(new Date().getTime())+".csv");
}

Answer 1

似乎日期选择器使用了 <table>标记(jQuery UI 日期选择器就是这样做的)。您可以简单地向 CSV 表中添加一个 ID 或类，然后修改您的 CSV 代码导出以仅针对该表的内容，而不是试图隐藏日期选择器:

<table id="csv-table" class="csv-table">

var rows = document.querySelectorAll("table#csv-table tbody tr, table#csv-table thead tr");
// or
var rows = document.querySelectorAll("table.csv-table tbody tr, table.csv-table thead tr");

请注意，从元素中隐藏或删除类不会使其“消失”。