[英]Remove the specific column in table
我正在努力使用表格列隱藏和顯示復選框。 我想刪除“火星”列(粗體)和相應的數據(粗體)。
刪除“火星”列后,金星及其尊重的數據值將在表格中居中。
在這里檢查: http : //jsfiddle.net/bL44n3aj/3/
刪除“火星”列后,我需要此輸出: http : //jsfiddle.net/2Lcsc2go/
我的CSS和HTML部分:
td{ border:1px solid #000; } th{ border:1px solid red; font-weight:normal !important; } tr.sub-header th{ text-align:center !important; border:1px solid blue !important; font-weight:bold !important; } tr.sub-header-value td{ text-align:center !important; font-weight:bold !important; }
<table width="80%"> <tr> <th>Produced</th> <th>Sold</th> <th>Produced</th> <th>Sold</th> </tr> <tr class="sub-header"> <th colspan="2">Mars</th> <th colspan="2" scope="colgroup">Venus</th> </tr> <tr> <td>50,000</td> <td>30,000</td> <td>100,000</td> <td>80,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2"> Venus data </td> </tr> <tr> <td>10,000</td> <td>5,000</td> <td>12,000</td> <td>9,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2">Venus data</td> </tr> </table> <input type="checkbox"> Remove Mars
這是一種駭客的方式。 為了減少黑客行為,您需要向所有tds添加類。
我正在使用jQuery,您是否需要JavaScript版本?
$(function(){ var removed = false; $("#removeMars").click(function(){ if (!removed) { $.each($("#t tr"), function(){ var tds = $(this).find("th, td"); if (tds.length == 2) { $(tds[1]).attr("colspan", "4"); $(tds[0]).remove(); } }) removed = true; } }) })
td{ border:1px solid #000; } th{ border:1px solid red; } tr.sub-header th{ text-align:center !important; border:1px solid blue !important; font-weight:bold !important; } tr.sub-header-value td{ text-align:center !important; font-weight:bold !important; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="t" width="80%"> <tr> <th>Produced</th> <th>Sold</th> <th>Produced</th> <th>Sold</th> </tr> <tr class="sub-header"> <th colspan="2" >Mars</th> <th colspan="2" scope="colgroup">Venus</th> </tr> <tr> <td>50,000</td> <td>30,000</td> <td>100,000</td> <td>80,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2"> Venus data </td> </tr> <tr> <td>10,000</td> <td>5,000</td> <td>12,000</td> <td>9,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2">Venus data</td> </tr> </table> <input type="checkbox" id="removeMars"> Remove Mars
完整的解決方案:
$(function(){
var removed = false;
$("#removeMars").change(function(){
if(this.checked) {
if (!removed) {
$.each($("#t tr"), function(){
var tds = $(this).find("th, td");
if (tds.length == 2) {
$(tds[1]).attr("colspan", "4");
$(tds[0]).hide();
}
})
removed = true;
}
}
else{
$.each($("#t tr"), function(){
var tds = $(this).find("th, td");
if (tds.length == 2) {
$(tds[1]).attr("colspan", "2");
$(tds[0]).show();
}
})
removed = false;
}
})
})
檢查此Fiddle鏈接: http : //jsfiddle.net/qLo60ux8/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.