在 td 类“edit”上，我只想显示跨度类“look”并去除其他选择类选项值，然后将它们导入 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
});
}
})()
最佳答案
让我们尝试通过简单地使用 text() 来清除 select 和 span，这将用文本替换每个 td 中的任何 html
$('#'+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
});
关于javascript - 使用 jquery 克隆()一个 html 表及其所有数据，包括选择及其选项和输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19886163/