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

时间:2015-03-06 19:28:44

标签: javascript html css html5 google-apps-script

使用Google Apps脚本创建网络应用。

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

一切正常,除了桌子边框..,

以下是代码。

 <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>

2 个答案:

答案 0 :(得分:2)

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

而且,据我所知,将脚本标记放在表格中是不可行的。 最好把脚本标签放在table标签旁边,最后一件事 - 你做了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>

答案 1 :(得分:0)

你的代码适用于我,添加一个宽度属性也是为了看看是否有帮助,如果不只是用css border:1px solid #ccc;

来设置样式