Question

我已经取出了需要在表格中显示的jSON数据，但是我在使用列标题和列之间的适当间距来格式化表时遇到了一些问题。

这是我在html中填写表格的当前代码：

Html页面：

<body>
    <table id="lessons">

    </table>
</body>

这就是我对js函数所拥有的：

function populateTable(lesson) {
    var row = $("<tr />");
    $('#lessons').append(row);
    row.append($("<td>" + lesson.name + "</td>"));
    row.append($("<td>" + lesson.credits + "</td>"));
    row.append($("<td>" + lesson.startDate + "</td>"));
};

这就是我现在的结果（但是没有标题 - 我想知道如何添加它们，因为我正在向表中添加内容，这样我就不会有标记的空表。

名称积分 开始日期
英语4 01/01/2013
数学5 01/01/2013

但我想在列之间添加舒适的间距，使其看起来像一张桌子。为行添加交替颜色也很棒。

我能够添加以下css，它修复了布局和间距以及表格中数据的交替着色。我现在唯一的问题是在加载表时显示列标题。我不想将它们硬编码到html中，因为它们将在加载内容之前始终显示。另外，我在负载之间清空表，如果我在html页面中对它们进行硬编码，它们将被删除。

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

Answer 1

检查以下代码段

＆＃13;

var lesson = {
  "name": "xyz",
  "credits": "Abc",
  "startDate": "21-01-2902"
};

$(function() {
  populateTable(lesson);
})

function populateTable(lesson) {
  var row = $("<tr ></tr>");
  var td1 = $("<td></td>");
  td1.html(lesson.name);
  var td2 = $("<td></td>");
  td2.html(lesson.credits);
  var td3 = $("<td></td>");
  td3.html(lesson.startDate);
  row.append(td1);
  row.append(td2);
  row.append(td3);
  $("#lessons").find('tbody').append(row);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="lessons" border="1">
  <thead>
    <tr>
      <th>Name</th>
      
      <th>Credits</th>
      
      <th>StartDate</th>
      </tr>
    </thead>
  <tbody>
    </tbody>
</table>

＆＃13;

希望这有帮助

Answer 2

如果您愿意依赖纯CSS，那么CSS3（大多数现代浏览器）将支持以下样式规则，其中.tbl-striped是表的类。您也可以使用已经使用的ID替换它。所以：

<强> HTML

<table class="tbl-striped"> ... </table>
<!-- or using the id you already have -->
<table id="lessons"> ... </table>

<强> CSS

/* This CSS will not work in IE8 or lower */
.tbl-striped tr:nth-child(2n-1) td { 
    background-color: #f2f2f2; 
}
/* or using the id you already have */
#lessons tr:nth-child(2n-1) td { 
    background-color: #f2f2f2; 
}

现在，如果你想只使用Javascript而不改变你的代码，你只需要添加一个全局变量并应用这样的样式。 PS：这是伪代码不能正常工作。

<强>的Javascript

counter = 0;

function populateTable(lesson) {
    if(counter>0){
        ...reset counter to 0
    } else {
        ...add a class to the tr in the following line that will change its color
         var row = $("<tr class="..." />");
         counter++;
    }
    $('#lessons').append(row);
    row.append($("<td>" + lesson.name + "</td>"));
    row.append($("<td>" + lesson.credits + "</td>"));
    row.append($("<td>" + lesson.startDate + "</td>"));
};

这可以让你走上正轨。你一直在编辑答案，所以我会等着看是否需要在答案中添加更多内容。如果您已准备好所有日期，则应该在函数中放置一个循环并运行将样式应用于其他每一行的路径列表。这将避免使用全局变量。

还需要考虑的事情

您的JavaScript应该像以下内容一样，以避免一直调用追加的开销。看起来你的数据量很小，所以它并不重要，但只是需要注意未来更大的数据。再次，这是伪代码不能正常工作。

function populateTable(lesson) {
    var row = "<tr><td>"+ lesson.name + "</td>" + ... + "</tr>";
    $("#lessons").append(row);
};

我很难看到我知道但更好的优化。您甚至可以删除行变量，只需将所有内容放入追加代码即可。

使用备用行着色格式化html表以显示json数据

2 个答案: