Question

我已将输入文本框中输入的文字附加到网址，结果以json格式显示。

我希望它以动态的方式显示在表格格式中。

提前致谢。

function filter() {
     var parameters = [
        ["name", document.getElementById('myInput1').value],
        ["name1", document.getElementById('myInput2').value]             
    ];

    var query = parameters.map(function (couple) {
        return couple.join("=");
    }).join("&");

    var url = "myurl" + query;

   window.location = "myurl"+query;
}

Answer 1

如果你有一个简单的JSON对象，那么你可以使用下面的代码动态生成一个表。

const jsonObj = {
  name1: 'test',
  name2: 'test 2',
  name3: 'test 3'
};

const table = document.createElement('table');
const thead = document.createElement('thead');
const tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

document.body.appendChild(table);

const headTr =  document.createElement('tr');
const bodyTr =  document.createElement('tr');
thead.appendChild(headTr);
thead.appendChild(bodyTr);

Object.keys(jsonObj).forEach((key) => {
  const headTd = document.createElement('td');
  const bodyTd = document.createElement('td');
  headTr.appendChild(headTd);
  bodyTr.appendChild(bodyTd);
  headTd.innerHTML = key;
  bodyTd.innerHTML = jsonObj[key];
});

你没有提供关于如何呈现对象的示例，所以我只是假设它。

使用真实的json

进行更新

下面的解决方案有点复杂，并没有真正推广。但是应该让你开始创建自己的表。

const jsonObj = {
	"files": [
    {
      "name": "100.png",
      "index": 0,
      "id": "57dbed2c76b6e73ad720de8",
      "mimeType": "image\/png",
      "lastEdited": "2016-09-16T3:01:32Z"
    },
    {
      "name": "101.png",
      "index": 1,
      "id": "57bed2c76b6e73ad720de8",
      "mimeType": "image\/png",
      "lastEdited": "2016-10-16T3:01:32Z"
    }
  ]
};

function renderArray(arr) {
	const headers = [];
  const rows = [];
  arr.forEach((obj, idx) => {
  	Object.keys(obj).forEach((key) => {
    	if (!~headers.indexOf(key)) {
        headers.push(key);
      }
      rows[idx] = rows[idx] || [];
      rows[idx].push(obj[key]);
    });
  });
	const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  table.appendChild(thead);
  table.appendChild(tbody);
  
  const headTr =  document.createElement('tr');
  thead.appendChild(headTr);
 	headers.forEach((header) => {
  	const td =  document.createElement('td');
    headTr.appendChild(td);
    td.innerHTML = header;
  });
  
  rows.forEach((row) => {
  	const rowTr = document.createElement('tr');
    tbody.appendChild(rowTr);
  	row.forEach((value) => {
    	const td = document.createElement('td');
      rowTr.appendChild(td);
      td.innerHTML = value;
    });
  });
 	return table;
}

function createTable(jsonObj) {
	const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  table.appendChild(thead);
  table.appendChild(tbody);

  const headTr =  document.createElement('tr');
  const bodyTr =  document.createElement('tr');
  thead.appendChild(headTr);
  thead.appendChild(bodyTr);
  
  Object.keys(jsonObj).forEach((key) => {
    const value = jsonObj[key];
    const headTd = document.createElement('td');
    const bodyTd = document.createElement('td');
    headTr.appendChild(headTd);
    bodyTr.appendChild(bodyTd);
    headTd.innerHTML = key;
    if (Array.isArray(value)) {
    	bodyTd.appendChild(renderArray(value));
    } else {
    	bodyTd.innerHTML = value;
    }
    
  });
 	return table;
}

document.body.appendChild(createTable(jsonObj));

使用json数据构建动态表

1 个答案:

使用真实的json