用JQuery导出HTML table到Excel,不能导出table中input值
用的是table2excel.jsplugin。下面是代码。把function里excludeinput设置为false也不能导出input值<!DOCTYPEHTML>...
用的是table2excel.js plugin。下面是代码。把function里 exclude input设置为false也不能导出input值
<!DOCTYPE HTML>
<html>
<head> <meta charset="utf-8" />
<title></title>
</head>
<body>
<h7>新建项目</h7>
<p> 报告编号: <input type="text" id=“input” value=""> </p>
<p> 测试项目: <input type="text" id=“input” value=""> </p>
<table class="table" border="1"> </br>
<tr>
<th>化学实验室样品接收确认表</th>
</tr>
<tr>
<td>样品测试开案号</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品名称</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品描述</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品及外包装是否完整</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>送样人</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>接样人</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>交接日期</td>
<td> <input type="text" > </td>
</tr>
</table> </br>
<button id="btn" onclick="sub()">导出</button>
<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="table2excel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#btn").click(function(){ //点击按钮执行导出
$(".table").table2excel({ //选取导出的表格
filename: "项目", //导出的文件名
exclude_img: true, //是否导出图片
exclude_links: true,
exclude_inputs: false
});
})
</script>
</body>
</html> 展开
<!DOCTYPE HTML>
<html>
<head> <meta charset="utf-8" />
<title></title>
</head>
<body>
<h7>新建项目</h7>
<p> 报告编号: <input type="text" id=“input” value=""> </p>
<p> 测试项目: <input type="text" id=“input” value=""> </p>
<table class="table" border="1"> </br>
<tr>
<th>化学实验室样品接收确认表</th>
</tr>
<tr>
<td>样品测试开案号</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品名称</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品描述</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>样品及外包装是否完整</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>送样人</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>接样人</td>
<td> <input type="text" > </td>
</tr>
<tr>
<td>交接日期</td>
<td> <input type="text" > </td>
</tr>
</table> </br>
<button id="btn" onclick="sub()">导出</button>
<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="table2excel.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#btn").click(function(){ //点击按钮执行导出
$(".table").table2excel({ //选取导出的表格
filename: "项目", //导出的文件名
exclude_img: true, //是否导出图片
exclude_links: true,
exclude_inputs: false
});
})
</script>
</body>
</html> 展开
1个回答
展开全部
你好!
exclude_inputs 这个属性设置的是: 是否导出输入框中的内容.
也就是说为true才是导出输入框中的内容.$("#btn").click(function () { //点击按钮执行导出
$(".table tr").each(function(i, _tr){//循环表格的行
var tds = $(_tr).find("td");//得到每行的所有列
tds.each(function(j, _td){//循环每列
var _ipt = $(_td).find("input");//查找每列当中的INPUT控件
var hasInput = (_ipt.length>0)?1:0;
if(hasInput) {
//console.log('第'+(i+1)+'行'+(j+1)+'列含有INPUT控件');
_ipt.attr("value", _ipt.val());//如果有INPUT控件就给它设置value值
}
});
});
$(".table").table2excel({ //选取导出的表格
filename: "项目", //导出的文件名
exclude_img: true, //是否导出图片
exclude_links: true,
exclude_inputs: true
});
})代码不复杂,看看注释就好了。
为什么要这么复杂的设置INPUT控件的value值,因为table2excel.js的源码当中是获取INPUT的value属性值,
但它得到的并不是动态赋值后的value值,所以你的数据无法导出到excel当中.当然这种做法只是一种解决方案,最好结合你的实际情况去使用,修改源码当然也可以.
建议以后遇到类似这种问题,最好先看下源码,了解下它的执行逻辑,原理.
希望对你有帮助!
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询