2015-09-21 46 views
0

下面是我的代碼,但它不工作。我該怎麼做才能解決它?使用javascript數組時,表格內容不顯示?

特別見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();不顯示錶的內容。

請運行代碼。我該怎麼做才能解決它?

+0

我不確定你的意思是什麼動態表。你期望什麼行爲? –

+0

請運行上面的代碼,當我在javascript中放置行+列內容時,表格行不會出現。 @Michael Laszlo –

+2

如果你得到答案,我會很驚訝。有太多的代碼要看!你爲什麼不創建一個簡化的頁面併發布?如果有的話,它會幫助你調試問題。 –

回答

1

我真正的問題是在函數showtbl();它不顯示錶格的 內容。

如果去掉無關的空<tbody><tr></tr></tbody>它的工作原理:

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

數據表不喜歡多<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而不是使用谷歌驅動器 - 更容易維護和更改版本。我注意到你正在使用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"/> 
+0

謝謝你願意回答,當用戶輸入一個帶參數的url時,'.urlParam'意圖例如:[http://playstore.co.id?apps=ss-clothes](http://playstore.co。 id?apps = ss-clothes)會根據關鍵字** ss clothes **自動過濾數據。如果包含它而不會搞亂其他代碼,是否有解決方案? –

+0

嗨,我成功地完成了我的問題,修改代碼到'showtbl(); $(文件)。就緒(函數(){ VAR表= $( '#myTable的')的dataTable({ 響應:真, 「oSearch」:{ 「SSEARCH」:$ .urlParam(」 apps') } }); });'謝謝@davidkonrad –

0

據我所知,datatables插件需要格式良好的表才能正常工作。您需要doc和doc中指定的thead和tbody標籤(仔細閱讀:https://www.datatables.net/manual/installation)。一旦完成,你不必編寫所有的代碼來過濾和顯示你想要的。

+0

我加了'thead'&'tbody'。但是,它還沒有工作。 –