javascript - JSON 到 HTML5 表

标签 javascript jquery css json html

如果您在 jQuery Ajax 中接收到 JSON 格式的数据,并根据表格中某行的特定列颜色填充 HTML5 表格(使用 bootstrap 4 CSS 样式?)

例如,如果我收到这样一个 JSON 格式的数据集:

{ "name":"John", "age":31, "city":"New York" };

列城市是纽约所以表格行应该是绿色所以成品应该是这样的:

<tr class="success">
  <td>John</td>
  <td>31</td>
  <td>New York</td>
</tr>

我是 jQuery 的新手,谁能指导我如何实现这一点?

我现在正在使用数据表库,我所做的是:

function btnSearch_Click() {
  $.ajax({
    type: "POST",
    url: "index.aspx/GetJobs",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      $('.table-sortable').dataTable({
        destroy: true,
        data: data,
        columns: [
        {
          'd': 'Name'
        },
        {
          'd': 'Age'
        },
        {
          'd': 'City'
        }]
      });
    }
  });
};

当前的 HTML5 代码如下所示

<table class="table table-hover thead-inverse  table-bordered table-sortable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
</table>

但是当我单击按钮时,浏览器没有返回任何数据行(SQL Server 确实返回数据)。另外,正如我提到的,我不知道如何实现,如果连续返回特定数据,我需要为其着色...

提前感谢您的帮助...

最佳答案

试试这个:

$('.table-sortable').dataTable({
  destroy: true,
  data: data,
  columns: [
    { "data": "name" },
    { "data": "age" },
    { "data": "city" },
  ]
});

关于javascript - JSON 到 HTML5 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46519400/

相关文章:

javascript - 如何创建一个函数来选择特定的数组?

javascript - Google 跟踪代码管理器数据层类型错误 : ES6

javascript - AngularJS在ng-repeat中调用对象的函数

javascript - 无法解释此 <head> 片段中的 IE 条件

javascript - 如何使用 jquery 显示和隐藏 html 页面的不同 <section>?

css - Laravel dompdf 将 View 转换为 pdf 时出现问题,内容会被放大

javascript - Ext Js 4 "white-space"仅适用于元素中的一个网格

javascript - 闭包 - Javascript

css - 如何覆盖边框 :none?

javascript - 如何 "enable"jquery bootgrid 网格/表