用web实现读取csv文件 使用html表格的方法

1、在huilder工具创建一个存储用户信息的csv文件，内容格式如下：

Tonf,23,1029423

Gowd,45,2049323

Fepd,43,3423494

备注：csv文件以name，age，id三个字段存放用户信息用逗号隔开。

2、由于需要使用到前端的JQuery库，建议下载一个本地 jquery文件，你也可以使用网络路劲加载Jquery。

具体获取方式参考图：

3、在hbuilder中创建一个空的html文件，并用script标签引入我们准备的jQuery文件，具体操作如图：

4、在html文件的body标签中，输入以下内容：

<div class="userlist">

        <table id = "ut">

               <tr >

                    <td>name</td>

                    <td>age</td>

                     <td>id</td>

              </tr>

      </table>

</div>

5、在html末尾出，创建一个script标签，标签中内容如下：

<script type="text/javascript">

          mtr = document.getElementById("ut") ;

          //使用ajax加载csv文件的数据

          $.ajax({

                  url: "list.csv",

                  success: function(result) {

                  frag = document.createDocumentFragment();

                  // 对csv文件的数据先以行分割

                  userList = result.split("\n");

                // 我们在对每一行以逗号作分割

                  for(i=0;i<userList.length;i++){

                  userary = userList[i].split(",");

                  tr = document.createElement("tr");

                    // 对每行的内容遍历到td标签去

                  for(j = 0;j<userary.length;j++){

                           td = document.createElement("td");

                           td.append(userary[j]);

                          tr.appendChild(td);

              }

             frag.appendChild(tr);

          }

          // 加载到web页面

           mtr.appendChild(frag);

     }

});

</script>

6、用浏览器打开html页面，查看结果，

7、最后对上述步骤总思路分析：

1. 我们使用ajax加载csv文件数据

2. 将加载到的数据先以行为单位作分割

3. 再将每一行以逗号作分割，并动态创建tr标签和td标签

4. 最后将动态创建的标签动态添加到table标签