ฉันสร้างตารางใน ASPX แล้ว ฉันต้องการซ่อนคอลัมน์ใดคอลัมน์หนึ่งตามข้อกำหนด แต่ไม่มีแอตทริบิวต์เหมือนvisibleในการสร้างตาราง HTML ฉันจะแก้ปัญหาของฉันได้อย่างไร?
ฉันสร้างตารางใน ASPX แล้ว ฉันต้องการซ่อนคอลัมน์ใดคอลัมน์หนึ่งตามข้อกำหนด แต่ไม่มีแอตทริบิวต์เหมือนvisibleในการสร้างตาราง HTML ฉันจะแก้ปัญหาของฉันได้อย่างไร?
คำตอบ:
คุณต้องใช้ Style Sheet เพื่อจุดประสงค์นี้
<td style="display:none;">
td:first-child { display:none; }
คุณสามารถใช้nth-childตัวเลือก CSS เพื่อซ่อนทั้งคอลัมน์:
#myTable tr > *:nth-child(2) {
display: none;
}
สิ่งนี้ทำงานภายใต้สมมติฐานที่ว่าเซลล์ของคอลัมน์ N (ไม่ว่าจะเป็น a thหรือtd) จะเป็นองค์ประกอบลูกที่ N ของแถวเสมอ
หากคุณต้องการให้หมายเลขคอลัมน์เป็นแบบไดนามิกคุณสามารถทำได้โดยใช้querySelectorAllหรือกรอบงานใด ๆ ที่นำเสนอฟังก์ชันการทำงานที่คล้ายคลึงกันดังต่อไปjQueryนี้:
$('#myTable tr > *:nth-child(2)').hide();
(โซลูชัน jQuery ยังทำงานบนเบราว์เซอร์เดิมที่ไม่รองรับnth-child )
คุณยังสามารถใช้:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
ความแตกต่างระหว่างพวกมันที่ "ซ่อน" ซ่อนเซลล์ แต่มันเก็บที่ว่างไว้ แต่ด้วยการ "ยุบ" ช่องว่างจะไม่ถูกจัดขึ้นเหมือนจอแสดงผล: ไม่มี สิ่งนี้สำคัญมากเมื่อซ่อนทั้งคอลัมน์หรือแถว
visibility: collapseถูกออกแบบมาเฉพาะสำหรับการจัดการเซลล์แสดง / ซ่อนตัวอยู่เนื่องจากมีความแตกต่างเมื่อคำนวณความกว้างของเซลล์ / display:noneความสูงระหว่างนี้และ ดูdeveloper.mozilla.org/en-US/docs/Web/CSS/visibility#Values
คำตอบของคอสเกือบถูกต้อง แต่อาจมีผลข้างเคียงที่เป็นอันตรายได้ ถูกต้องมากขึ้น:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) จะเรียงซ้อนแอตทริบิวต์ให้กับลูก ๆ ทั้งหมด ซึ่งหมายความว่า*:nth-child(1)จะซ่อนแรกtdของแต่ละtr และซ่อนองค์ประกอบแรกของทุกtdเด็ก หากสิ่งใดของคุณtdมีสิ่งต่างๆเช่นปุ่มไอคอนอินพุตหรือเลือกรายการแรกจะถูกซ่อนไว้ (อ๊ะ!)
แม้ว่าคุณจะไม่ได้ในขณะนี้มีสิ่งที่จะถูกซ่อนภาพความขุ่นมัวของคุณลงที่ถนนถ้าคุณจำเป็นต้องเพิ่มอีกหนึ่ง อย่าลงโทษตัวเองในอนาคตของคุณแบบนั้นนั่นจะเป็นความเจ็บปวดในการแก้ไข!
คำตอบของฉันจะซ่อนแรกtdและthในทุกtrใน#myTableการรักษาองค์ประกอบอื่น ๆ ของคุณให้ปลอดภัย
คนบูตใช้ระดับบน.hidden<td>
คุณยังสามารถซ่อนคอลัมน์โดยใช้องค์ประกอบ col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
หากต้องการซ่อนคอลัมน์ที่สองในตาราง:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
ปัญหาที่ทราบ: สิ่งนี้ใช้ไม่ได้ใน Google Chrome กรุณาโหวตข้อบกพร่องที่https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>ใช้. hideFullColumn ในตารางและ. hidecol ใน th คุณไม่จำเป็นต้องเพิ่มคลาสใน td ทีละรายการเนื่องจากจะเป็นปัญหาเนื่องจากดัชนีอาจไม่อยู่ในใจของแต่ละ td
คุณยังสามารถทำสิ่งที่ vs dev แนะนำโดยทางโปรแกรมได้โดยกำหนดสไตล์ด้วย Javascript โดยการวนซ้ำผ่านคอลัมน์และตั้งค่าองค์ประกอบ td ที่ดัชนีเฉพาะเพื่อให้มีสไตล์นั้น
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);