使用网页浏览器显示表格

2022-09-16 21:11 | 阅读量: 0 | 标签: tutorial, webviewer, table

网页浏览器(Webviewer)除了可以显示现成的网页之外，我们还可以用来显示表格。

本文需要简单的html+javascript+css知识。

实现的效果如下：

网页浏览器与html如何交互

在网页浏览器组件中，我们可以通过设置网页浏览框.页面交换字符串为块和执行javascript块来向html文件发送数据。

在html文件中使用javascript来设置页面交换字符串window.AppInventor.setWebViewString("str")，或者设置页面标题document.title = "str"。这样就可以通过页面浏览器.页面交换字符串块或者当前页标题来获取返回的值。

准备html文件

新建一个html文件，内容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <style type="text/css">
            table { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333;
            border-width: 1px; border-color: #666666; border-collapse: collapse; width:100%;
            } th { border-width: 1px; padding: 8px; border-style: solid; border-color:
            #666666; } td { border-width: 1px; padding: 8px; border-style: solid; border-color:
            #666666; text-align:center; font-size:20px} tr:nth-child(even){ background:lightgreen;
            }
        </style>
                <script type="text/javascript">
            function showTable(jsonData) {

                var data = JSON.parse(jsonData);
                var head = data[0];

                var str = "<table onclick='tabClick();'>";


                for (var i = 0; i < data.length; i++) {
                    str += "<tr>";
                    for (var j = 0; j < data[i].length; j++) {
                        str += "<td>" + data[i][j] + "</td>";
                    }
                    str += "</tr>";
                }
                str += "</table>";

                document.body.innerHTML = "";
                var table = document.createElement("div");
                table.innerHTML = str;
                document.body.appendChild(table);
            }
            function tabClick() {
                var td = event.srcElement;
                var str = '{"row":"' + (td.parentElement.rowIndex + 1) + '","col":"' + (td.cellIndex + 1) + '","value":"' + td.innerHTML + '"}';
                window.AppInventor.setWebViewString(str);
            } 
        </script>
    </head>
    <body>

    </body>
 </html>

将html文件另存为table.html文件，并上传到项目的素材中。