Question

我最近开始使用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>

Answer 1

好的，我真的不知道它为什么会起作用，但在这里我改变了一些话。

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

问题是要抓住这个“blanc”。因此，我搜索了一种方法，将“class = \'row \'”添加到头部（这样就可以解决问题）。因此，我在表格解除后创建了一个tbdy部分并关闭了初始函数。

在appendTable中，我从tbody开始，可以使用正确的css提交数组。

我不能说为什么它有效但事实是它很好。

感谢。

具有“图形错误”空间的数组

1 个答案: