关于javascript：如何隐藏表格标题列


How can i hide a table header Column

我有一个 HTML 表格，里面有输入字段，我的表格由 4 列组成，我只需要在 UI 上显示 3 列，第四列用于其他一些工作，这就是我不想要的原因在 UI

上显示它

  • 在我的代码中，我有四列 Item Code Item Name Selling Price 和 quantity
  • 我正在尝试将 Selling Price 列隐藏为标题
  • 我已经隐藏了正文部分，但是在隐藏标题时遇到了问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
var tableData = [{
   "Item Code":"1001",
   "Item Name":"Beverages",
   "Selling Price":"65",
   "Quantity":"12"

  },
  {
   "Item Code":"2003",
   "Item Name":"Juices",
   "Selling Price":"75",
   "Quantity":"14"
  },
  {
   "Item Code":"1004",
   "Item Name":"Soups",
   "Selling Price":"689",
   "Quantity":"15"

  },
  {
   "Item Code":"2005",
   "Item Name":"Cookies",
   "Selling Price":"74",
   "Quantity":"17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[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.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display ="none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border ="none";
        quantityField.style["text-align"] ="center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  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(tableData);
1
2
3
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js">
<table class="w-100" id=HourlysalesSummary></table>

没有css的解决方案：
您可以使用此行从 DOM 中删除元素：

1
table.rows[i].removeChild(childNode);

或：

1
childNode.style = 'display: none'

保留元素但不显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
var tableData = [{
   "Item Code":"1001",
   "Item Name":"Beverages",
   "Selling Price":"65",
   "Quantity":"12"

  },
  {
   "Item Code":"2003",
   "Item Name":"Juices",
   "Selling Price":"75",
   "Quantity":"14"
  },
  {
   "Item Code":"1004",
   "Item Name":"Soups",
   "Selling Price":"689",
   "Quantity":"15"

  },
  {
   "Item Code":"2005",
   "Item Name":"Cookies",
   "Selling Price":"74",
   "Quantity":"17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[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.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display ="none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border ="none";
        quantityField.style["text-align"] ="center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  divContainer.innerHTML ="";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  hideColumn(table, 3)
}
addTable(tableData);

function hideColumn(table, index) {
  for(var i=0;i<table.rows.length;i++){
     const childNode = table.rows[i].childNodes[index - 1];
     //childNode.style = 'display: none'
     table.rows[i].removeChild(childNode);
  }
}
1
2
3
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js">
<table class="w-100" id=HourlysalesSummary></table>

使用css的解决方案：

1
2
3
4
table tr th:nth-child(3),
table tr td:nth-child(3){
 display: none;
}
相关讨论

你已经包含了 JQuery，为什么不使用它 -

1
$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').hide();

您可以将 idx 替换为列索引。列索引将从 1 开始。此代码将隐藏列标题和数据行。

要显示一列，只需使用 .show() 而不是 .hide()

1
$('#HourlysalesSummary td:nth-child(' + idx + '),#HourlysalesSummary th:nth-child(' + idx + ')').show();

这只会隐藏列，而不是从 DOM 中删除，因此您仍然可以使用这些数据以防万一您想将其用于任何其他目的。

你可以使用 css

1
2
3
td:nth-child(3),th:nth-child(3){
  display: none;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
var tableData = [{
   "Item Code":"1001",
   "Item Name":"Beverages",
   "Selling Price":"65",
   "Quantity":"12"

  },
  {
   "Item Code":"2003",
   "Item Name":"Juices",
   "Selling Price":"75",
   "Quantity":"14"
  },
  {
   "Item Code":"1004",
   "Item Name":"Soups",
   "Selling Price":"689",
   "Quantity":"15"

  },
  {
   "Item Code":"2005",
   "Item Name":"Cookies",
   "Selling Price":"74",
   "Quantity":"17"

  },

]

function addTable(tableData) {
  var col = Object.keys(tableData[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.appendChild(th);
    tr.classList.add("text-center");
    tr.classList.add("head")
  }
  for (var i = 0; i < tableData.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      let tabCell = tr.insertCell(-1);
      var hiddenField = document.createElement("input");
      hiddenField.style.display ="none";
      var tabledata = tableData[i][col[j]];

      if (tableData[i]['Item Code'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Code');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Item Name'] === tableData[i][col[j]]) {
        tabCell.innerHTML = tabledata;
        hiddenField.setAttribute('name', 'Item_Name');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Selling Price'] === tableData[i][col[j]]) {
        /*  tabCell.innerHTML = tabledata; */ //here i am hiding the selling price in body
        hiddenField.setAttribute('name', 'sellingPrice');
        hiddenField.setAttribute('value', tabledata);
        tabCell.appendChild(hiddenField);
      }
      if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
        var quantityField = document.createElement("input");
        quantityField.style.border ="none";
        quantityField.style["text-align"] ="center";
        quantityField.setAttribute('name', 'Quantity');
        quantityField.setAttribute('value', tabledata);
        quantityField.setAttribute('type', 'number');
        quantityField.classList.add("dataReset");
        tabCell.appendChild(quantityField);
        /* console.log(quantityField) */
      }
      if (j > 1)
        tabCell.classList.add("text-right");
    }
  }
  var divContainer = document.getElementById("HourlysalesSummary");
  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(tableData);
1
2
3
4
td:nth-child(3),
th:nth-child(3) {
  display: none;
}
1
2
3
4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js">
<table class="w-100" id=HourlysalesSummary></table>

相关讨论