JavaScript读取本地文件并在页面上展示

最新推荐文章于 2024-08-25 17:59:01 发布

jialChen

最新推荐文章于 2024-08-25 17:59:01 发布

阅读量3.6k

点赞数 4

分类专栏：程序设计实践

本文链接：https://blog.csdn.net/jialChen/article/details/119235924

版权

HTML JavaScript CSV 文件读取表格展示

关键词由CSDN通过智能技术生成

程序设计实践专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题描述

现有一个csv文件（表格），想要在HTML页面中选择文件并打开，显示表格。

技术要点

HTML 表格结构及其样式
JavaScript 文件读写
JavaScript DOM添加

效果展示

文件中的内容
在这里插入图片描述
打开网页的初始效果

选择文件后的展示效果
在这里插入图片描述

参考程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table{
			text-align: center;
			border-collapse: collapse;
			border:1px solid #808080;
		}
		td{
			padding: 0px 40px 0px 40px;
		}
	</style>
</head>
<body>
	<input type='file' accept='text/plain' onchange='openFile(event)'><br>
	        <div id="output"></div>
	<table id="tab" align="center">
    	<caption>表格展示模块</caption>
	    <thead>
	         <tr>
	             <th colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
	         </tr>
	    </thead>
        <tbody>
	        <!-- 此处可以置空，也可以加一行，作为表头行 -->
	    </tbody>
        <!-- <tfoot><td>备注：</td><td colspan="2"></td></tfoot> -->
    </table>
    
    <script type="text/javascript">
    
    	function addtr(row_index,row_element_arr){
            var tab=document.getElementById('tab');
            if(row_index%2==0)
            {
            	var html="<tr style='background: #C0C0C0'>";
            }
            else
            {
            	var html="<tr style='background: #fff'>";
            }
            var i;
            for(i=0;i<row_element_arr.length;i++)
            {

                html+='<td>'+String(row_element_arr[i])+'</td>';
            }
            html+="</td></tr>";
            tab.innerHTML+=html;
        }
        var openFile = function(event)
        {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function() 
            {
                if(reader.result) 
                {
                    //文件内容:reader.result
                    var arr=reader.result.split("\n");
                    
                    // $("#output").html(reader.result);
                    for (let index=0; index < arr.length; index++)
                    {
                    	// arr[index],一行数据
                        row_element_arr=arr[index].split(",");
                        addtr(index,row_element_arr);
                    }
                }
            };
            reader.readAsText(input.files[0]);
        };
    </script>
</body>
</html>