javascript - 无法将边框应用于 HTML 表格

标签 javascript css html-table bootstrap-4

我创建了一个在 UI 上完美呈现的 HTML 表格，我想给表格添加边框，但它没有发生

  • body 得到了正确的边界，但头部产生了问题
  • 我想将表格的前两行作为表格标题，或者也想加粗第二行的文本

片段:

var tableValue = [{
    "5": "2809",
    "6": "14287",
    "7": "59293",
    "8": "100743",
    "9": "97757",
    "10": "104908",
    "11": "63379",
    "12": "72618",
    "13": "136867",
    "14": "202212",
    "15": "153197",
    "16": "93730",
    "17": "99993",
    "18": "113918",
    "19": "114126",
    "20": "108788",
    "21": "66446",
    "22": "10459",
    "OUTLET": "",
    "BILL___DATE": "TOTAL",
    "TOTAL": "1615530"
  },
  {
    "5": "2677",
    "6": "5948",
    "7": "10259",
    "8": "17453",
    "9": "21044",
    "10": "21235",
    "11": "19691",
    "12": "22327",
    "13": "37018",
    "14": "51560",
    "15": "68478",
    "16": "33797",
    "17": "32089",
    "18": "29810",
    "19": "32071",
    "20": "30675",
    "21": "34726",
    "22": "5568",
    "OUTLET": "JAYANAGAR",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "476426"
  },
  {
    "5": "132",
    "6": "6251",
    "7": "19551",
    "8": "31286",
    "9": "36486",
    "10": "34866",
    "11": "17343",
    "12": "20845",
    "13": "38726",
    "14": "88845",
    "15": "39685",
    "16": "24593",
    "17": "28852",
    "18": "31652",
    "19": "35708",
    "20": "38314",
    "21": "17373",
    "22": "645",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "511153"
  },
  {
    "5": "0",
    "6": "0",
    "7": "2963",
    "8": "11132",
    "9": "8799",
    "10": "8371",
    "11": "8582",
    "12": "11856",
    "13": "23646",
    "14": "11929",
    "15": "11946",
    "16": "12162",
    "17": "13064",
    "18": "12182",
    "19": "16915",
    "20": "12046",
    "21": "1828",
    "22": "0",
    "OUTLET": "",
    "BILL___DATE": "2018-09-03",
    "TOTAL": "167421"
  },
  {
    "5": "0",
    "6": "0",
    "7": "892",
    "8": "2674",
    "9": "5797",
    "10": "4583",
    "11": "3950",
    "12": "4597",
    "13": "9567",
    "14": "11079",
    "15": "8712",
    "16": "4445",
    "17": "7730",
    "18": "11314",
    "19": "8765",
    "20": "6012",
    "21": "2024",
    "22": "0",
    "OUTLET": "MALLESHWARAM",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "92141"
  },
  {
    "5": "0",
    "6": "0",
    "7": "1122",
    "8": "3860",
    "9": "6297",
    "10": "10145",
    "11": "5109",
    "12": "4418",
    "13": "9603",
    "14": "11024",
    "15": "9452",
    "16": "5707",
    "17": "9455",
    "18": "11709",
    "19": "11553",
    "20": "12863",
    "21": "3387",
    "22": "0",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "115704"
  },
  {
    "5": "0",
    "6": "1122",
    "7": "9605",
    "8": "13939",
    "9": "10278",
    "10": "15947",
    "11": "5077",
    "12": "6046",
    "13": "8112",
    "14": "10164",
    "15": "7366",
    "16": "3414",
    "17": "4136",
    "18": "7295",
    "19": "3052",
    "20": "4656",
    "21": "3525",
    "22": "1579",
    "OUTLET": "KOLAR",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "115313"
  },
  {
    "5": "0",
    "6": "0",
    "7": "12694",
    "8": "11191",
    "9": "5931",
    "10": "9017",
    "11": "1188",
    "12": "2331",
    "13": "7590",
    "14": "7265",
    "15": "5924",
    "16": "5627",
    "17": "3456",
    "18": "5135",
    "19": "1634",
    "20": "2104",
    "21": "2470",
    "22": "40",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "83597"
  },
  {
    "5": "0",
    "6": "966",
    "7": "2207",
    "8": "9208",
    "9": "3125",
    "10": "744",
    "11": "2439",
    "12": "198",
    "13": "2605",
    "14": "10346",
    "15": "1634",
    "16": "3985",
    "17": "1211",
    "18": "4821",
    "19": "4428",
    "20": "2118",
    "21": "1113",
    "22": "2627",
    "OUTLET": "",
    "BILL___DATE": "2018-09-03",
    "TOTAL": "53775"
  }
]

function addTable(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  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.classList.add("test");
    tr.appendChild(th);
    tr.classList.add("table-active")
  }
  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);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata).toLocaleString('en-in')
      }
      tabCell.innerHTML = tabledata;

      if (j > 1)

        tabCell.classList.add("text-right");

    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("HourlyDate");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

}
addTable(tableValue);
table.table-bordered {
  border: 1px solid black;
  margin-top: 20px;
}

table.table-bordered>thead>tr>th {
  border: 1px solid black;
}

table.table-bordered>tbody>tr>td {
  border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>

我犯了什么错误？我也想将第二行设为粗体。

最佳答案

@vivek singh 您已经使用 thead 编写了样式，但是 thead 在您的 HTML 中不可用。我在当前HTML的基础上修改了CSS。希望有用。

var tableValue = [{
    "5": "2809",
    "6": "14287",
    "7": "59293",
    "8": "100743",
    "9": "97757",
    "10": "104908",
    "11": "63379",
    "12": "72618",
    "13": "136867",
    "14": "202212",
    "15": "153197",
    "16": "93730",
    "17": "99993",
    "18": "113918",
    "19": "114126",
    "20": "108788",
    "21": "66446",
    "22": "10459",
    "OUTLET": "",
    "BILL___DATE": "TOTAL",
    "TOTAL": "1615530"
  },
  {
    "5": "2677",
    "6": "5948",
    "7": "10259",
    "8": "17453",
    "9": "21044",
    "10": "21235",
    "11": "19691",
    "12": "22327",
    "13": "37018",
    "14": "51560",
    "15": "68478",
    "16": "33797",
    "17": "32089",
    "18": "29810",
    "19": "32071",
    "20": "30675",
    "21": "34726",
    "22": "5568",
    "OUTLET": "JAYANAGAR",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "476426"
  },
  {
    "5": "132",
    "6": "6251",
    "7": "19551",
    "8": "31286",
    "9": "36486",
    "10": "34866",
    "11": "17343",
    "12": "20845",
    "13": "38726",
    "14": "88845",
    "15": "39685",
    "16": "24593",
    "17": "28852",
    "18": "31652",
    "19": "35708",
    "20": "38314",
    "21": "17373",
    "22": "645",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "511153"
  },
  {
    "5": "0",
    "6": "0",
    "7": "2963",
    "8": "11132",
    "9": "8799",
    "10": "8371",
    "11": "8582",
    "12": "11856",
    "13": "23646",
    "14": "11929",
    "15": "11946",
    "16": "12162",
    "17": "13064",
    "18": "12182",
    "19": "16915",
    "20": "12046",
    "21": "1828",
    "22": "0",
    "OUTLET": "",
    "BILL___DATE": "2018-09-03",
    "TOTAL": "167421"
  },
  {
    "5": "0",
    "6": "0",
    "7": "892",
    "8": "2674",
    "9": "5797",
    "10": "4583",
    "11": "3950",
    "12": "4597",
    "13": "9567",
    "14": "11079",
    "15": "8712",
    "16": "4445",
    "17": "7730",
    "18": "11314",
    "19": "8765",
    "20": "6012",
    "21": "2024",
    "22": "0",
    "OUTLET": "MALLESHWARAM",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "92141"
  },
  {
    "5": "0",
    "6": "0",
    "7": "1122",
    "8": "3860",
    "9": "6297",
    "10": "10145",
    "11": "5109",
    "12": "4418",
    "13": "9603",
    "14": "11024",
    "15": "9452",
    "16": "5707",
    "17": "9455",
    "18": "11709",
    "19": "11553",
    "20": "12863",
    "21": "3387",
    "22": "0",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "115704"
  },
  {
    "5": "0",
    "6": "1122",
    "7": "9605",
    "8": "13939",
    "9": "10278",
    "10": "15947",
    "11": "5077",
    "12": "6046",
    "13": "8112",
    "14": "10164",
    "15": "7366",
    "16": "3414",
    "17": "4136",
    "18": "7295",
    "19": "3052",
    "20": "4656",
    "21": "3525",
    "22": "1579",
    "OUTLET": "KOLAR",
    "BILL___DATE": "2018-09-01",
    "TOTAL": "115313"
  },
  {
    "5": "0",
    "6": "0",
    "7": "12694",
    "8": "11191",
    "9": "5931",
    "10": "9017",
    "11": "1188",
    "12": "2331",
    "13": "7590",
    "14": "7265",
    "15": "5924",
    "16": "5627",
    "17": "3456",
    "18": "5135",
    "19": "1634",
    "20": "2104",
    "21": "2470",
    "22": "40",
    "OUTLET": "",
    "BILL___DATE": "2018-09-02",
    "TOTAL": "83597"
  },
  {
    "5": "0",
    "6": "966",
    "7": "2207",
    "8": "9208",
    "9": "3125",
    "10": "744",
    "11": "2439",
    "12": "198",
    "13": "2605",
    "14": "10346",
    "15": "1634",
    "16": "3985",
    "17": "1211",
    "18": "4821",
    "19": "4428",
    "20": "2118",
    "21": "1113",
    "22": "2627",
    "OUTLET": "",
    "BILL___DATE": "2018-09-03",
    "TOTAL": "53775"
  }
]

function addTable(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  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.classList.add("test");
    tr.appendChild(th);
    tr.classList.add("table-active")
  }
  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);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata).toLocaleString('en-in')
      }
      tabCell.innerHTML = tabledata;

      if (j > 1)

        tabCell.classList.add("text-right");

    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("HourlyDate");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

}
addTable(tableValue);
table.table-bordered {
  border: 1px solid black;
  margin-top: 20px;
}

table.table-bordered>thead>tr>th {
  border: 1px solid black;
}

table.table-bordered>tbody>tr>td,table.table-bordered>tbody>tr>th {
  border: 1px solid black;
}
table.table-bordered>tbody>tr:nth-child(2) {
   font-weight: bolder;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div id="HourlyDate"></div>

关于javascript - 无法将边框应用于 HTML 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53943776/

上一篇：javascript - JQuery如何追加到同一个地方

下一篇：css - 使div滚动条始终加载在顶部

相关文章：

javascript - 具有嵌套层次结构的 AngularJS ng-include

javascript - 二级菜单粘在标题上

Jquery On Hover 文本覆盖

jquery - 在 ListView 中更改箭头的圆盘颜色

html - 如何识别类中 sass 中的第一个 anchor 标记？

javascript - 制表符:删除行时如何修改本地数组？

javascript - 如何在javascript中从数组中删除对象的属性？

javascript - 在 Javascript 中插入文本框值未通过 ASP.NET 验证

jquery - 按字母顺序将行插入到表格中的某个单元格上

html - 在 html_table(rvest) 中指定列类

©2024 IT工具网  联系我们