为什么动态表没有显示边框

Why border was not showing for dynamic table

本文关键字：显示 边框 动态 为什么      更新时间：2023-09-26

使用 Google Apps 脚本创建 Web 应用程序。

我正在从电子表格中检索数据并尝试以表格格式显示。

一切都工作正常，除了表的边框..，

下面是代码。

 <html>
  <body>
<table border="1">
  <script language="javascript" type="text/javascript">
   window.onload = function()
   {
       google.script.run.withSuccessHandler(showData).getpres();
    }

 function showData(data)
 {
  var html = "";
  for (var i=0; i<data.length; i++) 
  { 
    if(data[i][0] <= 2)
    {

  document.write("<tr><td>Number " + i + " is:</td>");
  document.write("<td>" + data[i][3] + "</td></tr>");
    }
  }
}
    </script>
    </table>
   </body>
   </html>

要添加边框 - 最好在样式标签中使用 css，我已经为您添加了它

而且，据

我所知，将脚本标签放在表中是不行的。最好将脚本标签放在表格标签旁边，最后一件事 - 你做了 document.write，这意味着浏览器必须在每次插入后更新页面布局，最好将所有行连接到一个字符串并只添加一次。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <table id="table" class="table"></table>
        <script language="javascript" type="text/javascript">
            window.onload = function() {
                google.script.run.withSuccessHandler(showData).getpres();
            }
            function showData(data) {
                var rows = [];
                for (var i = 0, ii = data.length; i < ii; i++) {
                    if(data[i][0] <= 2) {
                        rows.push('<tr>');
                        rows.push('<td>Number ' + i + ' is:</td>')
                        rows.push('<td>' + data[i][3] + '</td>');
                        rows.push('</tr>');
                    }
                }
                document.getElementById('table').innerHTML = rows.join('');
            }
        </script>
        <style>
            .table{
                border: 1px solid black;
            }
        </style>
    </body>
</html>

您的代码对我有用，还可以添加一个宽度属性以查看是否有帮助，如果不是仅使用 css border:1px solid #ccc; 设置样式

相关文章：