如何隱藏表格標題列

Question

我有一個HTML表，其中包含輸入字段，我的表由4列組成，從中我只需要在UI上顯示3列，第四列用於其他工作，這就是為什么我不想在UI上顯示它

• 在我的代碼中，我有四列Item Code Item Name Selling Price和quantity
• 我試圖隱藏“ Selling Price列作為標題
• 我已經隱藏了身體部位，但是在隱藏標題時遇到了問題

 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); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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"></script> <table class="w-100" id=HourlysalesSummary></table> 

Answer 1

沒有CSS的解決方案：您可以使用此行從DOM中刪除元素：

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

要么：

childNode.style = 'display: none'

保留元素但不顯示。

 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); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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"></script> <table class="w-100" id=HourlysalesSummary></table> 

使用css的解決方案：

table tr th:nth-child(3),
table tr td:nth-child(3){
 display: none;
}

Answer 2

您可以使用CSS來做

td:nth-child(3),th:nth-child(3){
  display: none;
}

 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); 

 td:nth-child(3), th:nth-child(3) { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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"></script> <table class="w-100" id=HourlysalesSummary></table> 

Answer 3

您已經包括了JQuery，為什么不利用它-

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

您可以將idx替換為列索引。 列索引將從1開始。此代碼將隱藏列標題和數據行。

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

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

這只會隱藏列，而不會從DOM中刪除，因此您仍然可以使用數據以防其他用途。