3

在 td 类“编辑”上，我只想显示跨度类“外观”并剥离其他选择类选项值，然后将它们导入 excel。

<tr class="proj_rec" data-id="4">
  <td class="proj_id">
    4                    </td>
  <td>
    Music in the stores                    </td>
  <td class="edit">
    <select class="touch" style="display: none;">
      <option value="13">Bloopers</option><option value="1">Customer Service</option><option value="2">DC</option><option value="3">Ecommerce</option><option value="4">Finance/Accounting</option><option value="5">Human Resources</option><option value="6">Inbound Logistics</option><option value="7">Information Systems</option><option value="14">Management</option><option value="8">Marketing</option><option value="9">Merchandising</option><option value="10">Property</option><option value="11">Rebuying</option><option value="12">Sales</option>                        </select>
    <span class="look">
      Sales                        </span>
  </td>
  <td class="edit">
    <select class="touch" style="display: none;">
      <option value="1">As is review</option><option value="2">Complete</option><option value="3">Development</option><option value="4">Implemented</option><option value="5">Not started</option><option value="6">To be design</option>                        </select>
    <span class="look">
      As is review                        </span>
  </td>
  <td class="edit">
    <select class="touch" style="display: none;">
      <option value="1"> Objective</option><option value="2"> People</option><option value="3"> Process</option><option value="4"> Systems</option>                        </select>
    <span class="look">
      Process                        </span>
  </td>

在此处输入图像描述

现在我有这些空白出现，我认为这是因为它呈现了选择类的所有选项。

我尝试了几个选项，但无济于事。这就是我现在的位置。它在导出后删除了 UI 选项，我仍然在 excel 中遇到问题，如上图所示。

    <td><input type="button" id="dlink" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"></td>
            <a id="dlink"  style="display:none;"></a>

var tableToExcel = (function () {
    var uri = 'data:application/vnd.ms-excel;base64,'
    , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
    , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    return function (table, name, filename) {
        $('#'+table+' .touch').each(function(){
            $(this).parent().prepend($(this).val()); //if you want to keep the values.
        });
        $('#'+table+' .touch').remove();
        //if (!table.nodeType) table = document.getElementById(table)
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
        document.getElementById("dlink").href = uri + base64(format(template, ctx));
        document.getElementById("dlink").download = filename;
        document.getElementById("dlink").click();
        $('#'+table).remove();      
    }
})()

var tableToExcel = (function () {
     var uri = 'data:application/vnd.ms-excel;base64,'
        , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
        , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    return function (table, name, filename) {
       $('#'+table+' .touch').each(function(){
            $(this).parent().text($(this).val()); //if you want to keep the values.
 });
        var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
        document.getElementById('dlink').href = uri + base64(format(template, ctx));
        document.getElementById('dlink').download = filename;
        document.getElementById('dlink').click();
         $('#'+table+' .look').each(function(){
            $(this).parent().text($(this).text()); //get text from span and replace parent innerHtml with it
 });
     }
})()
4

1 回答 1

2

text()让我们尝试通过简单地使用which 将每个 td 中的任何 html 替换为仅文本来消除 select 和 span

 $('#'+table+' .touch').each(function(){
            $(this).parent().text($(this).val()); //if you want to keep the values.
 });

或使用跨度中的文本：

  $('#'+table+' .look').each(function(){
            $(this).parent().text($(this).text()); //get text from span and replace parent innerHtml with it
 });
于 2013-11-10T04:21:40.427 回答