使用javascript数组时表格内容不显示？答案

【问题标题】：Table content does not display when using javascript array?使用javascript数组时表格内容不显示？
【发布时间】：2015-09-21 20:54:45
【问题描述】：

下面是我的代码，但它还不能工作。我该怎么做才能解决它？

具体见function showtbl();

我真正的问题在于function showtbl();，它不显示表格的内容。

var tampilqr = function (kode) {
    var url = 'http://www.playstore.co.id/p/download.html?qr='
    var urlfix = url + kode
    var keluar = '<a style="float:right;color:#999;text-decoration:none;background:#fff;width:20px;text-align:center;font-weight:bold;" onclick="rem();">X</a><br>'
    var cek = keluar + '<iframe src="' + urlfix + '"></iframe>'
    if (jscd.os == 'Android') {
        window.location.href = urlfix;
    } else {
        uglipop({
            class: 'dl',
            source: 'html',
            content: cek
        });
    }
}

var tampilss = function (kode) {
    var url = 'https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/detil.html?ss='
    var urlfix = url + kode
    var keluar = '<a style="float:right;color:#999;text-decoration:none;background:#fff;width:20px;text-align:center;font-weight:bold;" onclick="rem();">X</a><br>'
    var cek = keluar + '<iframe src="' + urlfix + '"></iframe>'
    uglipop({
        class: 'ss',
        source: 'html',
        content: cek
    });
}

var rem = function () {
    remove();
}

function tulis() {
    document.getElementById("cari").placeholder = "cari aplikasi";
    if (on_index = true) {
        window.location = window.location.pathname + '?apps='
    }
}

function showtbl() {
    var img = "<img src='logo/"
    var imgt = ".png'/>"
    var li = "<br /> Link: <a href='?apps="
    var lin = "'>http://playstore.co.id/?apps="
    var link = "</a><br /> Terbit: "
    var b = "<button type='button' class='btn btn-danger' onclick='tampilss(&quot;"
    var bt = "&quot;);'>Screenshoot</button><br><button type='button' class='btn btn-success' onclick='tampilqr(&quot;"
    var btn = "&quot;);'>Download</button>"
    var A1 = "ss-clothes"
    var A2 = "korselindo"
    var A3 = "real-hiphop-shop"

    /* if HTML, it must be:
    <tr>
        <td><img src="logo/ss-clothes.png" /></td>
        <td>SS-Clothes<br /> Link: <a href="http://playstore.co.id?apps=ss-clothes">http://playstore.co.id?apps=ss-clothes</a><br /> Terbit: 23-06-2015</td>
        <td><button class="btn btn-danger" onclick="tampilss(&quot;ss-clothes&quot;);" type="button">Screenshoot</button><br />
        <button class="btn btn-success" onclick="tampilqr(&quot;ss-clothes&quot;);" type="button">Download</button></td>
    </tr>
    */

    var values = new Array(3);
    values[1] = [img + A1 + imgt, A1 + li + A1 + lin + A1 + link, b + A1 + bt + A1 + btn];
    values[2] = [img + A2 + imgt, A2 + li + A2 + lin + A2 + link, b + A2 + bt + A2 + btn];
    values[3] = [img + A3 + imgt, A3 + li + A3 + lin + A3 + link, b + A3 + bt + A3 + btn];

    var myTable = document.getElementById("myTable");

    // IE7 only supports appending rows to tbody
    var tbody = document.createElement("tbody");

    // for each outer array row
    for (var i = 1; i < values.length; i++) {
        var tr = document.createElement("tr");

        // for each inner array cell
        // create td then text, append
        for (var j = 0; j < values[i].length; j++) {
            var td = document.createElement("td");
            var txt = document.createElement("span");
            txt.innerHTML = values[i][j];
            td.appendChild(txt);
            tr.appendChild(td);
        }

        // append row to table
        // IE7 requires append row to tbody, append tbody to table
        tbody.appendChild(tr);
        myTable.appendChild(tbody);
    }

}

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="UTF-8">
    <title>Download Aplikasi</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="description" content="Toko aplikasi android Indonesia, apptoko, download aplikasi android .apk, appstore alternatif Google play store android market">
    <link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/style.css" rel="stylesheet" />
    <script src='https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/modernizr.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/jquery.dataTables.js"></script>
    <link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/bootstrap.min.js"></script>
    <script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/os.js"></script>

    <link href="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/css/uglipop.css" rel="stylesheet" />
    <script async="" src="https://dfe4876b91450c3efbab76e8d43c4a665e738138-www.googledrive.com/host/0B94BKN-oncxmfllMNlZkWGJTaF9QWmtLOVktR3djU3B0NGJuTFVwS2tDMS1jYzZkNEN6Y00/js/uglipop.js"></script>

</head>

<body onLoad="tulis();showtbl();">

    <div id="atas">
        <a href="javascript:window.location.replace('http://www.playstore.co.id?apps=')"><img src="http://1.bp.blogspot.com/-UON5Z5IIOus/VdH_gr8XRXI/AAAAAAAAAbY/Q-I4QfbZr9U/s1600/playstore-indonesia-logo.gif" /></a>
    </div>

    <table class="table table-striped" id="myTable">
        <thead>
            <tr>
                <th>Logo</th>
                <th>Nama App</th>
                <th>Tindakan</th>
            </tr>
        </thead>
        <tbody>
            <tr></tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            $("img").error(function () {
                $(this).hide();
            });

            var table = $('#myTable').dataTable({
                "oSearch": {
                    "sSearch": $.urlParam('apps'),
                    responsive: true
                },
            });
        });

        $.urlParam = function (name) {

            var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
            return results && results[1].replace(/(^\s+|[^a-zA-Z ]+|\s+$)/g, ' ');
            return results && results[1].replace(/\s+/g, ' ');

            if (!results) {
                return '//';
            }
            return results[1] || '';
        };
    </script>
</body>

</html>

我真正的问题在于function showtbl();，它不显示表格的内容。

请运行代码。我该怎么做才能解决它？

【问题讨论】：

我不确定动态表是什么意思。你期望什么行为？
请运行上面的代码，当我在javascript中放置行+列内容时，表格行不会出现。 @Michael Laszlo
如果您得到答复，我会感到非常惊讶。有很多代码要看！你为什么不创建一个简化的页面并发布呢？如果有的话，它将帮助您调试问题。
如果我知道答案，我当然不会提出这个问题。如果您有解决方案，请回答。 @阿德里安·林奇
Adrian 的意思是，通读您的代码不是我们的工作，因为这既冗长又耗时。如果您想快速获得答案，请创建Minimal, Complete, and Verifiable example

标签： javascript jquery arrays html datatables

【解决方案1】：

我真正的问题在于函数 showtbl();不显示表格的内容。

如果您删除不相关的空 <tbody><tr></tr></tbody> 它会起作用：

http://jsfiddle.net/yujpozf9/1/

dataTables 不喜欢多个 <tbody> 元素，当然也不喜欢具有奇数列（如无）的 <tbody> 元素。

还将responsive: true 移到它所属的位置并删除尾随' - 您似乎非常关注IE7，尾随引号是IE7 杀手。

var table = $('#myTable').dataTable({
   responsive: true,
   "oSearch": {
      //"sSearch": $.urlParam('apps')
   }
});

已将$.urlParam 注释掉，因为这不是主要问题，而且我不完全理解您要做什么。您的代码是我见过的最特殊的 dataTables 用途之一（无意冒犯！） - 尝试阅读有关列渲染的内容，我认为这样做会更快乐 -> https://datatables.net/examples/advanced_init/column_render.html - 一般的官方示例。

另外，您可以使用 dataTables CDN，而不是使用 google 驱动器 - 更容易维护和更改版本。我注意到您使用的是 v1.10.2：

<script type="text/javascript" src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"/>

【讨论】：

感谢您的回答，$ .urlParam 旨在当用户输入带有参数的 url 时，例如：http://playstore.co.id?apps=ss-clothes 它会自动根据关键字 ss 衣服过滤数据>。如果在不弄乱其他代码的情况下包含它，是否有解决方案？
嗨，我已经成功完成了将代码修改为showtbl(); $(document).ready(function(){ var table = $('#myTable').dataTable({ responsive: true, "oSearch": { "sSearch": $.urlParam('apps') } }); } );的问题，谢谢@davidkonrad

【解决方案2】：

据我所知，datatables 插件需要格式良好的表格才能正常工作。您需要文档中指定的 thead 和 tbody 标签（仔细阅读：https://www.datatables.net/manual/installation）。完成后，您无需编写所有代码来过滤和显示您想要的内容。

【讨论】：

我添加了thead & tbody。但是，它还没有工作。