Question

我有来自函数的JSOn数据，我不需要所有数据，也必须根据要获取的数据创建一些数据，其中有很多代码偏僻，它们指定了如何循环遍历json数据并显示

$.ajax({url: 'page.php',
        data: {id: 1},
        dataType: 'json',
        type:'POST',
        success: function (json) {
            div.html('<table align="left" width="70%" class="table table-striped borderless p-l-xl">'+
                    '<tr>'+
                        '<td>d1</td><td>d2</td><td>Action</td></tr>'+
                        '<tr><td>'+json.d1+'</td><td>'+json.d2+'</td>'+
                        '<td><a href="javascript:;" class="t" data-id="'+ json.id +'" data-sid="'+json.sid+'">Delete</a></td>'+
                    '</tr>'+
                '</table>').removeClass('loading');
            } 
    });

尝试使用此代码

How to iterate JSON object with jQuery

但是我很困惑如何用自定义数据和单独的标题来填充自己的href

进行了小更新

$.each(json,function(index,item){
                $('<table><tr>').append(
                    $("<td>").text(item.d1),
                    $("<td>").text(item.d2),
                    $("<td>").html('<a href="javascript:;" class="d" data-sid="'+ json.id+'" data-id="'+json.id+'">Delete</a></td>')
                ).appendTo(div);
        });

现在它可以正常工作，并为每条记录创建单独的内容，并且缺少标题

同时我希望所有行都应在一个TABLE标记下并具有标题

Answer 1

更新之后，它会更清晰一些。

您说

”，而我希望所有行都应在一个TABLE标记下并具有标头”

...因此，一种简单的解决方案是在开始循环之前首先创建表，并在此时添加标头。然后，每次循环时，只需将新行追加到现有表中即可，而不是创建整个新表。

这样的逻辑并不太复杂

这里是一个演示，它使用一些虚拟数据而不是AJAX的响应来说明我的意思。

//dummy test data
var json = [{
    "id": 1,
    "d1": "Text 1",
    "d2": "Text 2"
  },
  {
    "id": 2,
    "d1": "Text A",
    "d2": "Text B"
  },
  {
    "id": 3,
    "d1": "Text X",
    "d2": "Text Y"
  },
];

var div = $("#div1");

var table = $('<table id="table1"><tr><th>Heading 1</th><th>Heading 2</th><th>Heading 3</th></tr>');

$.each(json, function(index, item) {
  var row = $("<tr>");
  row.append(
    $("<td>").text(item.d1),
    $("<td>").text(item.d2),
    $("<td>").html('<a href="javascript:;" class="d" data-sid="' + json.id + '" data-id="' + json.id + '">Delete</a></td>')
  );
  row.appendTo(table);
});

table.appendTo(div);

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #cccccc;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>

Answer 2

我相信这是您要实现的目标。（没有$ .get（）以外的jQuery）。

提供一些数据（这里是虚假的博客文章）
以某种方式修改数据
将修改后的数据放入表中
在“操作”列中提供删除行的链接

$.get('https://jsonplaceholder.typicode.com/posts', transformData);

function transformData(posts) {
  let tableData = posts.map(post => {
    return {
      id: post.id,
      title: post.title,
      added: 'added'
    }
  });
  makeTable(tableData);
}

function deleterow(el) {
  alert('Deleting row with id: ' + el.dataset.id);
}

function makeTable(data) {
  var table = document.createElement("table");
  table.style.border = "1px";
  var headerRow = document.createElement("thead");
  headerRow.style.backgroundColor = "#ccc";

  Object.keys(data[0]).forEach(key => {
    let headerCol = document.createElement("td");
    headerCol.textContent = key;
    headerRow.appendChild(headerCol);
  });
  let actionCol = document.createElement('td');
  actionCol.textContent = 'Action';
  headerRow.appendChild(actionCol);
  table.appendChild(headerRow);

  data.forEach(item => {
    let row = document.createElement("tr");
    Object.keys(item).forEach(key => {
      let col = document.createElement("td");
      col.textContent = item[key];
      row.appendChild(col);
    });
    let action = document.createElement("a");
    action.href = 'javascript:void(0);';
    action.textContent = 'Delete';
    action.setAttribute("onclick", 'deleterow(this)');
    action.dataset.id = item.id;
    action.dataset.title = item.title;
    action.dataset.added = item.added;
    row.appendChild(action);
    table.appendChild(row);
  });
  document.body.appendChild(table);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

来自Ajax调用的JSON数据

2 个答案: