JavaScript 导出 Excel 时处理 Table 中 Input 元素的方法

作者:小圆点时间:2026-10-24 12:07:30浏览:406

本文介绍在JavaScript中将HTML表格导出为Excel时,如何处理表格内的Input输入框元素。通过遍历获取所有Input节点,判断其类型与值,利用outerHTML属性将空文本框替换为空格,非空文本框替换为纯文本值,从而确保导出内容的格式正确与数据完整。

JavaScript 导出 Excel 时处理 Table 中 Input 元素的方法

具体实现思路如下:


核心在于修改Input元素的outerHTML属性。


以下是具体的操作示例:


参考代码实现如下:

 
定义重置输入的函数 resetInput():
{ 
使用 document.getElementsByTagName('input') 获取页面上所有的输入控件集合。
for(var i=0; i<controls.length; i++){
在循环内部,首先判断当前控件的类型是否为文本类型(type=='text')。
{ 
若类型为文本,进一步判断其当前值是否为空字符串。
{ 
如果值为空,将该控件的 outerHTML 替换为 '&nbsp'(非断行空格),以保留单元格结构。
} 
若值不为空,则执行以下逻辑:
{ 
将该控件的 outerHTML 直接替换为其当前的 value 值,从而去除Input标签,仅保留文本内容。
} 
} 
} 
} 

完成上述修改后,即可将处理后的表格导出至Excel。注意:单次循环可能无法完全覆盖所有动态变化的情况,需根据实际业务场景进行适当调整。

作者最新文章