Array mit einem "grafischen falschen" Leerzeichen

Ich habe jQuery, html und css vor kurzem gestartet und ich verstehe nicht wirklich alles. Da die Arbeit mit all diesen Dingen beschäftigt ist, weiß ich nicht, woher mein Problem kommt.Array mit einem "grafischen falschen" Leerzeichen

Ich möchte ein HTML-Array mit js generieren (Daten kommen (später) von einem Server). Dieses Array könnte "dynamisch" (automatisches Füllen, Aktualisieren usw.) und schön zu sehen sein (daher css).

Ich habe gerade etwas "gut". Die einzige Sache ist, dass ich eine "versteckte" Spalte habe und ich kann es nicht loswerden.

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>

Quelle

2016-05-25 dido dodi

Zuerst, warum Sie Tabelle in einer anderen Tabelle erstellen? Ihre ''-Tags werden nach hinzugefügt, anstatt sie innerhalb von 1st hinzuzufügen. Prüfen Sie, ob das Lösen dieser Probleme Ihr Problem lösen kann. – Shrabanee

Danke. Ich habe versucht, aber das Problem nicht behoben. Die erste Tabelle dient nur zur Anzeige. Es ist "normal jetzt". Auf diese Weise kann ich meinen Tisch auf der Seite drucken, wo ich möchte. In einem anderen Beispiel habe ich dieses Problem behoben, indem ich für jede Zeile die gleiche CSS-Klasse hinzufüge, aber hier ist es nicht das, was ich möchte. –

Es gibt keine extra (wie Sie in Frage gestellt haben) Ich kann sehen, während Sie Ihren HTML-Code debuggen. Vielleicht ist dies ein Problem mit Ihrem CSS. – Shrabanee

Ok, Ich weiß nicht wirklich, warum es s arbeiten, aber hier, was ich geändert und ein paar Worte zu.

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); 
}

Das Problem war, Fahrt dieses "blanc" zu bekommen. Daher habe ich nach einem Weg gesucht, dem Kopf "class = \ 'row \'" hinzuzufügen (auf diese Weise wird das Ding geglättet). Daher habe ich nach meiner Tischzerlegung einen TBDY-Teil erstellt und die Anfangsfunktion geschlossen.

In appendTable, ich beginne von tbody und kann das Array mit th rechts css ablegen.

Ich kann nicht sagen, warum es funktioniert, aber die Tatsache ist, dass es gut ist.

Danke.

Quelle

2016-05-25 14:38:27

Array mit einem "grafischen falschen" Leerzeichen

Antwort

Verwandte Themen