Question

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

所以我想，最简单的解决方案是在导出时删除datepicker类，但这不起作用。

我已将警报添加到jQuery代码中，以确保其均匀触发。果然如此。由于某种原因，它不会删除该类。关于如何修复removeClass的任何建议，或者更好的方法，如何确保datepicker不出现在我的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>

jquery代码：

$('#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 datepicker这样做）。不必试图隐藏日期选择器，您只需 向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");

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

Answer 2

我简化了您的示例（即...无模态和无CSV），为您提供了removeClass jQuery调用的有效示例。无法删除该类的原因是，在连接click事件之前，必须等待DOM ready事件。在我发布的示例代码中，您会注意到您所单击的版本以及一个带有document.ready联结版本的版本。您拥有的版本将无法删除该类，但DOM就绪版本将起作用。希望这会有所帮助。

<style>
    .date {
        background-color: purple;
    }

    .datepicker {
        background-color: blue;
    }

</style>

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script>

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


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

</script>

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div class="row">
    <button id="export" name="export">Export</button>

    <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>

Answer 3

导出按钮jquery事件应类似于以下给出的代码：-

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

这肯定会删除该类。但如果不行，那就尝试使用该库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

我不确定您使用的是哪种日期选择器。但是datepicker插件可能有某种附加方式，缓存中的输入可能称为datepicker。然后，您可以noop的功能，例如：

var exported = false;
$('#export').on('click', function(){
  exported = true
});

$('.datepicker').on('click', function() {
  if(exported) return $.noop();
  }
}

Answer 5

这是使用jQuery的方法。我已将您的问题缩小范围，以使答案更简单。

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

.datepicker {
 background: #1884c3;
 padding: 5px 2px;
}

.date {
  color: #ce8177;
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="export" name="export-button">Export</button><br/>

<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/>

Answer 6

我不知道您使用的是哪个日期（时间）选择器。但是我很确定问题在于插件会创建多个元素-因此仅删除class属性不足以消除所有元素。

在这里看看：

How do I *completely* remove a jQuery UI datepicker?

jQuery removeClass触发，但不删除类

6 个答案: