搜索
搜索

如何使用 JavaScript 在 Html 表中添加新的列和行

terry5546 发表于 Dev
13
特里5546

我有一个 excel csv 文件：

在此处输入图片说明

这个 csv 文件将上传到我的网站上，并允许他们以 html 表格形式查看 csv 的内容。例子：

在此处输入图片说明

正如您可以用户成功上传他们的 csv 文件并使用 html 表单查看内容。是否可以在 html 表的第一行添加新列？例如，当用户上传一个包含 2 条记录的 csv 文件时，脚本会自动Serial在现有记录的前面添加一个名为infront 的新行。

预期输出：

在此处输入图片说明

我试过的：我table_output += '<th>'+['Serial'+row]+'</th>'在里面添加了for(var row = 0; row < sheet_data.length; row++)但结果不是我想要的。我希望标题是<th>，下面的记录是<td>.在此处输入图片说明

我的完整代码（Html & Javascript）

<!DOCTYPE HTML>
<html>
<head>


    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
        <div class="card">
            <div class="card-header"><b>Select Excel File</b></div>
            <div class="card-body">
                
                <input type="file" id="excel_file" />

            </div>
        </div>
        <div id="excel_data" class="mt-5"></div>
    </div>
</body>
</html>

<script>

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

    if(!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type))
    {
        document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

        excel_file.value = '';

        return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event){

        var data = new Uint8Array(reader.result);

        var work_book = XLSX.read(data, {type:'array'});

        var sheet_name = work_book.SheetNames;

        var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {header:1});

        if(sheet_data.length > 0)
        {
            var table_output = '<table class="table table-striped table-bordered">';

            for(var row = 0; row < sheet_data.length; row++)
            {

                table_output += '<tr>';
        table_output += '<th>'+['Serial'+row]+'</th>'

                for(var cell = 0; cell < sheet_data[row].length; cell++)
                {
            
                    if(row == 0)
                    {

                        table_output += '<th>'+sheet_data[row][cell]+'</th>';

                    }
                    else
                    {

                        table_output += '<td>'+sheet_data[row][cell]+'</td>';

                    }

                }

                table_output += '</tr>';

            }

            table_output += '</table>';

            document.getElementById('excel_data').innerHTML = table_output;
        }

        excel_file.value = '';

    }

});

</script>
SANGEETH KUMAR SG

我更新了你的代码。请检查这是否是您需要的。

<!DOCTYPE HTML>
<html>

<head>


  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>

<body>
  <div class="container">
    <h2 class="text-center mt-4 mb-4">Convert Excel to HTML Table using JavaScript</h2>
    <div class="card">
      <div class="card-header"><b>Select Excel File</b></div>
      <div class="card-body">

        <input type="file" id="excel_file" />

      </div>
    </div>
    <div id="excel_data" class="mt-5"></div>
  </div>
</body>

</html>

<script>
  const excel_file = document.getElementById('excel_file');

  excel_file.addEventListener('change', (event) => {

    if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
      document.getElementById('excel_data').innerHTML = '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

      excel_file.value = '';

      return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function(event) {

      var data = new Uint8Array(reader.result);

      var work_book = XLSX.read(data, {
        type: 'array'
      });

      var sheet_name = work_book.SheetNames;

      var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], {
        header: 1
      });

      if (sheet_data.length > 0) {
        var table_output = '<table class="table table-striped table-bordered">';

        for (var row = 0; row < sheet_data.length; row++) {

          table_output += '<tr>';
          if (row == 0) {
            table_output += '<th>' + ['Serial'] + '</th>'
          } else {
            table_output += '<td>' + row + '</td>'
          }

          for (var cell = 0; cell < sheet_data[row].length; cell++) {

            if (row == 0) {

              table_output += '<th>' + sheet_data[row][cell] + '</th>';

            } else {

              table_output += '<td>' + sheet_data[row][cell] + '</td>';

            }

          }

          table_output += '</tr>';

        }

        table_output += '</table>';

        document.getElementById('excel_data').innerHTML = table_output;
      }

      excel_file.value = '';

    }

  });
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用JavaScript在HTML文本中添加新行？

Html表使用javascript动态添加和删除行

如何使用javascript向现有的html表添加新列

使用Javascript / JQuery动态填充HTML表中的新行

如何使用 Javascript 在 HTML 中添加变量

通过仅使用javascript的文本框中的用户输入，可以在html表中添加和删除行

使用JavaScript在HTML表中添加行

如何使用javascript更改html表中列的颜色

如何从 HTML 中的用户输入在表中添加新行

如何通过使用javascript和html防止表中的第一行

使用JavaScript在HTML中添加动态行

使用Javascript向表中添加新行

如何使用javascript和html一键向firebase数据库中的所有子项添加新数据

使用jQuery向生成的HTML表中添加标题行和时间列

如何使用javascript动态添加html类

如何使用javascript添加@html标记？

如何使用javascript过滤垂直html表

如何使用简单的javascript过滤html表？

如何使用javascript捕获HTML表内容？

使用HTML和JavaScript代码在Leaflet中添加新标记之前，请删除以前的标记

如何使用 JQuery 或 JavaScript 在 HTML 中的多个表之间添加一个表？

如何使用JavaScript为表中添加的新行设置ID或CSS选择器

如何使用JavaScript在HTML中显示图像

使用JavaScript向表添加新行

如何在不使用insertRow的情况下使用JavaScript将表行添加到HTML中的现有表中？

如何使用JavaScript可视化HTML数据表中MySQL表中的> 1000行？

如何使用 JavaScript DOM 在 html 中添加 svg？

如何分割索引，并通过onclick事件将其打印在JavaScript和HTML的新行中

如何使用javascript從html表中搜索數字？

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档