「グラフィックが間違っている」スペースを持つ配列

最近jQuery、html、cssを開始しました。これらのことすべてを扱う作業として、どこから問題が生じているのか分かりません。「グラフィックが間違っている」スペースを持つ配列

jsでhtml配列を生成したい（データは（後で）サーバーから来る）。この配列は "動的"（自動塗りつぶし、更新など）で、見栄えが良い（したがってCSS）かもしれません。

私は今、「良い」ものを持っています。唯一のことは、私は "隠された"コラムを持っていて、私はそれを取り除くことができないということです。

var data = ["City 1", "City 2", "City 3"]; //headers 
 

 
var data1= [["New York", 123, "Seattle"], 
 
      ["Paris", "Milan", "Rome"], 
 
      ["Pittsburg", "Wichita", "Boise"]]; 
 

 
var cityTable; 
 

 

 
//Init and creation of the header 
 
$(document).ready(function() { 
 
    cityTable = makeTable($("#test"), data); 
 
    appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]); 
 
}); 
 

 

 

 
// Add a line thanks to the button 
 
$(function(){ 
 
     $('#button').click(
 
      function(e){ 
 
      appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]); 
 
      } 
 
     ) 
 
    } 
 
) 
 

 
//Add a line method 
 
function appendTableColumn(table, rowData) { 
 
    var lastRow = $("<tr class=\'row\'/>").appendTo(table.find('thead:last')); 
 
    $.each(rowData, function(colIndex, c) { 
 
     console.log(c); 
 
     lastRow.append($('<td id="cell" class=\'cell\'/>').text(c)); 
 
    }); 
 
    return lastRow; 
 
} 
 

 
//Creation of the table 
 
function makeTable(container, data) { 
 

 
    var table = $("<table/>"); 
 
    var row = $("<thead>"); 
 

 
    row.append($("<tr class=\'row\'/>")); 
 
    $.each(data, function(rowIndex, r) { 
 
     row.append($("<th>").text(r)); 
 
     row.append($("</th>")); 
 
    }); 
 

 
    table.append(row); 
 

 
    return container.append(table); 
 
}

tbody{ 
 
    display: : block; 
 
    padding:20px; 
 
    max-width:800px; 
 
    margin:auto auto; 
 
    font-family:sans; 
 
    overflow-y: scroll; 
 
} 
 

 
table{ 
 

 
} 
 

 

 
th { 
 
    background:#666; 
 
    color:#fff; 
 
    padding-left: 5px; 
 
} 
 
td { 
 
    padding:5px; 
 
} 
 

 
input { 
 
    height: 24px; 
 
    font-size: 18px; 
 
    padding:2px; 
 
    border:0; 
 
} 
 
body { 
 
    font: normal medium/1.4 sans-serif; 
 
} 
 

 

 

 
.cell:hover{ 
 
background-color:#FF7368; 
 
} 
 
.row:hover{ 
 
    background-color:#E8CAB2; 
 
} 
 
.row:hover{ 
 
    background-color:#E8CAB2; 
 
}

<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Editable Table</title> 
 
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
 
    <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> 
 
    <script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script> 
 
    <link rel="stylesheet" href="in0.css"> 
 
    <link href="metro-icons.css" rel="stylesheet"> 
 
    <script src="in0.js"></script> 
 
</head> 
 
<body> 
 
    <button id='button' type="button" >Click Me!</button> 
 
    <input type="search" id="search" placeholder="Filter by Title"> 
 
    <table id="test"></table> 
 
</body> 
 
</html>

出典

2016-05-25 dido dodi

まず、別のテーブルの中にテーブルを作成する理由は何ですか？「」タグは、の内側に追加するのではなく、の後に追加されます。これらの問題を解決することで問題が解決するかどうかを確認します。 – Shrabanee

ありがとうございます。私は試みたが、それは問題を修正していない。最初のテーブルは表示用です。それは今のところ "普通です"。このようにして、私は自分のテーブルをどこにでも印刷することができます。別の例では、この問題はすべての行で同じcssクラスを追加するように修正されましたが、ここでは必要ではありません。 –

（あなたが問題に言及したように）私はあなたのhtmlコードをデバッグ中に見ることができます余分です。これはあなたのCSSの問題です。 – Shrabanee

[OK]を、私はそれが動作しますが、ここで私が変更するものとについていくつかの単語sはなぜtは本当に知っているドン。

function appendTableColumn(table, rowData) { 
    var lastRow = $("<tr class=\'row\'>").appendTo(table.find('tbody:last')); 
    $.each(rowData, function(colIndex, c) { 
     console.log(c); 
     lastRow.append($('<td id="cell" class=\'cell\'/>').text(c)); 
    }); 
    return lastRow; 
} 

function makeTable(container, data) { 

    var table = $("<table/>"); 
    var row = $("<thead class=\'row\'>"); 

    $.each(data, function(rowIndex, r) { 
     row.append($("<th >").text(r)); 
     row.append($("</th>")); 
    }); 

    table.append(row); 
    var row1 = $("<tbody >"); 
    table.append(row1); 
    return container.append(table); 
}

問題はこの「ブラン」に乗ることでした。それで、私は頭に "class = \ 'row \'"を追加する方法を探しました。それで私はテーブル解読の後にtbdyパーツを作成し、初期関数を閉じました。

appendTableではtbodyから始まり、右のcssで配列をファイルできます。

私はなぜそれが働いているのか言うことはできませんが、事実は良いです。

ありがとうございました。

出典

2016-05-25 14:38:27

「グラフィックが間違っている」スペースを持つ配列

答えて

関連する問題