javascript - 如果键是数字，它会自动与从 JSON 创建的表中的左侧对齐

Question

我正在使用 JSON 数据创建 HTML 表。我的 HTML 表是动态的。但问题是我将数字作为某些列的键，但如果我使用数字作为键，表的列会自动对齐位于表格左侧。

如果有人发现我的错误或语法错误，请告诉我。但据我所知，我已经完成了正确的编码，但不知道为什么数字键会自动对齐到最左边。 我想找到 JSON 格式的列

var tableValue = [{
  "OUTLET": "Ol1",
  "BILLDATE": "01-08-18",
  "TOTAL": "10",
  "AMOUNT": "2",
  "": "2",
  "5": "4"
}, {
  "OUTLET": "ol1",
  "BILLDATE": "02-08-18",
  "TOTAL": "20",
  "AMOUNT": "4",
  "": "4",
  "5": "4"
}, {
  "OUTLET": "ol1",
  "BILLDATE": "03-08-18",
  "TOTAL": "30",
  "AMOUNT": "6",
  "": "6",
  "5": "4"
}, {
  "OUTLET": "ol1",
  "BILLDATE": "04-08-18",
  "TOTAL": "40",
  "AMOUNT": "8",
  "": "8",
  "5": "4"
}, {
  "OUTLET": "ol2",
  "BILLDATE": "01-08-18",
  "TOTAL": "15",
  "AMOUNT": "3",
  "": "3",
  "5": "4"
}, {
  "OUTLET": "ol2",
  "BILLDATE": "02-08-18",
  "TOTAL": "25",
  "AMOUNT": "5",
  "": "5",
  "5": "4"
}, {
  "OUTLET": "ol2",
  "BILLDATE": "03-08-18",
  "TOTAL": "35",
  "AMOUNT": "7",
  "": "7",
  "5": "4"
}, {
  "OUTLET": "ol2",
  "BILLDATE": "04-08-18",
  "TOTAL": "45",
  "AMOUNT": "9",
  "": "9",
  "5": "4"
}, {
  "OUTLET": "ol3",
  "BILLDATE": "01-08-18",
  "TOTAL": "14",
  "AMOUNT": "2",
  "": "4",
  "5": "4"
}, {
  "OUTLET": "ol3",
  "BILLDATE": "02-08-18",
  "TOTAL": "24",
  "AMOUNT": "4",
  "": "4",
  "5": "4"
}, {
  "OUTLET": "ol3",
  "BILLDATE": "03-08-18",
  "TOTAL": "34",
  "AMOUNT": "5",
  "": "9",
  "5": "4"
}, {
  "OUTLET": "ol3",
  "BILLDATE": "04-08-18",
  "TOTAL": "44",
  "AMOUNT": "8",
  "": "12",
  "5": "4"
}]

function addTable() {
  var col = [];
  for (var i = 0; i < tableValue.length; i++) {
    for (var key in tableValue[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  // CREATE DYNAMIC TABLE.
  var table = document.createElement("table");

  // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < tableValue.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = tableValue[i][col[j]];
    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("newTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}
addTable()

这里是My js fiddle link of my table

Answer 1

这只是基本的 CSS - 将 text-align: right; 添加到相关的列元素。 (如果还没有的话，您可能需要向该列的 td 元素添加一个类。)