使用jquery clone（）一個html表格及其所有數據，包括select和它們的選項以及輸入

關於td類的「編輯」我只想顯示span類「look」並去掉其他選擇類的選項值和比導入他們到excel。使用jquery clone（）一個html表格及其所有數據，包括select和它們的選項以及輸入

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

enter image description here

現在我有這些空白顯示出來，我認爲這是由於它的渲染選擇類的所有選項。

我嘗試了幾個選項，但無濟於事。這就是我現在所處的位置。這是在導出後刪除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 
}); 
    } 
})()

來源

2013-11-10 cooking good

你只想要他們的值顯示？不清楚你的期望 – charlietfl

在導入之前選擇的值是yes，所以第一行將是「Sales」，下一個字段將是「As in review」，「Process」。只顯示每個單元格和所有行的 Sales中的內容。 –

讓我們試着擦了選擇，並通過簡單地使用text()跨度這將只用文本中的每個TD內更換任何HTML

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

或因使用文本span：

$('#'+table+' .look').each(function(){ 
      $(this).parent().text($(this).text()); //get text from span and replace parent innerHtml with it 
});

來源

2013-11-10 04:21:40 charlietfl

好的，我會給你一個去，讓你知道它是否適合我。吸引人的事情是因爲我在用戶按下按鈕時動態地創建內容，從而在表格內建立所有html數據。然後我推另一個按鈕導出爲Excel。所以..設置一個帶有DOM元素的JS變量，並且將選擇框移除到不存在的位置，然後創建一個沒有這些選擇框的DOM元素，推入Excel中。同時保持UI完好無損？ =] –

如果使用克隆，ui會保持不變 – charlietfl

我需要將UI保持原樣，我只希望將表數據導出爲excel，這是選擇的表數據，而不是所有其他選項。 –

使用jquery clone（）一個html表格及其所有數據，包括select和它們的選項以及輸入

回答

相關問題