使用Javascript隱藏默認欄位

在網上瀏覽關於Javascript顯示/隱藏的教程後，我只能找到所有列默認可見的示例。我正在尋找一種方法來默認隱藏某些列（並允許它們通過複選框切換），並且默認顯示一些列（並允許通過複選框切換它們）。使用Javascript隱藏默認欄位

這可能嗎？

僅供參考我的表結構如下：

<table> 
    <thead> 
<tr> 
    <th>Name</th> 
    <th>Job</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Mike</td> 
     <td>Dancer</td> 
    </tr> 
    </tbody> 
</table>

來源

2012-05-24 Patrick

請找我答以詳細的例子。它完成使用jquery –

純JavaScript：

HTML

<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br /> 
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />

function showhide(column, elem){ 
    if (elem.checked) 
     dp = "table-cell"; 
    else 
     dp = "none"; 
    tds = document.getElementsByTagName('tr'); 
    for (i=0; i<tds.length; i++) 
     tds[i].childNodes[column].style.display = dp; 
}

Pure JS fiddle example

請考慮使用JavaScript庫作爲JQuery這種瑣碎的事情。你的代碼可以是簡單的：

HTML

<input type="checkbox" data-col="1" checked="checked" /> Name<br /> 
<input type="checkbox" data-col="2" checked="checked" /> Job<br />

jQuery的JS：

$(function(){ 
    $(':checkbox').on('change', function(){ 
     $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle(); 
    }); 
});

jQuery Fiddle example

來源

2012-05-24 06:39:53

這是少得多的代碼，但是如何默認隱藏列？你的例子顯示了默認顯示的所有列。 – Patrick

用jQuery還是純JS？無論採用哪種方式，您只需從複選框開始取消選中，並隱藏要隱藏在body的'onload'（純JS）或'$（document）.ready（）'（jQuery）中的列。這裏是[jQuery Fiddle]（http://jsfiddle.net/ult_combo/FNfpA/5/）和[Pure JS]（http://jsfiddle.net/ult_combo/NPHDE/4/）之一。我也爲這些人添加了一些評論。 –

要隱藏應有屬性風格=列「顯示：無」最初

來源

2012-05-24 05:37:34 anjalis

這完美的作品！ – Patrick

絕對不是。谷歌會爲此打擊你。如果您不希望Google/Non-js用戶遇到任何問題，請使用javascript應用樣式。 –

對不起，但是您不知道他是否想要爲Intranet應用程序執行此操作。 – anjalis

在你的CSS，你應該有類似

.hidden{ 
    display:none; 
} 
.shown{ 
    display:block; 
}

然後在你的HTML，你應該有類似

<table> 
    <thead> 
    <tr> 
     <th id="th1" class="shown">Name</th> 
     <th id="th2" class="shown">Job</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td id="td1" class="shown">Mike</td> 
     <td id="td2" class="shown">Dancer</td> 
    </tr> 
    </tbody> 
</table>

你就必須實現一個TOGLE方法，將更改列的知名度

//id should be passhed as 1, 2, 3 so on... 
function togleTable(id){ 
    if(document.getElementById("th"+id).className == "shown"){ 
     document.getElementById("th"+id).className = "hidden"; 
    } 
    if(document.getElementById("td"+id).className == "shown"){ 
     document.getElementById("td"+id).className = "hidden"; 
    } 
    if(document.getElementById("th"+id).className == "hidden"){ 
     document.getElementById("th"+id).className = "shown"; 
    } 
    if(document.getElementById("td"+id).className == "hidden"){ 
     document.getElementById("td"+id).className = "shown"; 
    } 
}

，然後在compobox的onChange（）事件，你應該調用togleTable函數傳遞作爲ID的行號你想顯示/隱藏

這是一個很好的開始，我想。玩得開心

修訂

，如果你想有一個以上的類的行不要忘記，你也可以使用這個：的document.getElementById（「身份證」）classList.add（「類「）; document.getElementById（'id'）。classList.remove（'class'）;

來源

2012-05-24 05:54:36 MaVRoSCy

這裏的（使用jQuery）切換功能：

function toggleColumns(column, state) { 
    var cells = $("table").find("th, td").filter(":nth-child(" + column + ")"); 

    if (state) 
     cells.hide(); 
    else 
     cells.show(); 
}

如果你需要列默認是隱藏的，你可以在的onLoad調用這個函數。例http://jsfiddle.net/nynEd/

來源

2012-05-24 05:55:14 Greegus

你能解釋一下在onLoad過程中如何調用這個函數嗎？我需要默認隱藏很多列。 – Patrick

有許多出路，這是我的選擇是使用基本的jQuery功能，例如，

<input type="checkbox" id="opt1" checked/>col 1 
<input type="checkbox" id="opt2"/>col 2 

<table border="1" cellpadding="5"> 
    <thead> 
<tr> 
    <th>Name</th> 
    <th>Job</th> 
    <th id="col1">col 1</th> 
    <th id="col2">col 2</th> 
</tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Mike</td> 
     <td>Dancer</td> 
     <td class="data1">data 1</td> 
     <td class="data2">data 2</td> 
    </tr> 
    </tbody> 
</table>

這是你的HTML代碼，

$(document).ready(function() { 
    if($("#opt1").is(":checked")){ 
     $("#col1").show(); 
     $(".data1").show(); 
    }else{ 
     $("#col1").hide(); 
     $(".data1").hide(); 
    } 
    if($("#opt2").is(":checked")){ 
     $("#col2").show(); 
     $(".data2").show(); 
    }else{ 
     $("#col2").hide(); 
     $(".data2").hide(); 
    } 

    $("#opt1").live('click', function() { 
     if($("#opt1").is(":checked")){ 
     $("#col1").show(); 
     $(".data1").show(); 
    }else{ 
     $("#col1").hide(); 
     $(".data1").hide(); 
    } 
    }); 

    $("#opt2").live('click', function() { 
     if($("#opt2").is(":checked")){ 
     $("#col2").show(); 
     $(".data2").show(); 
    }else{ 
     $("#col2").hide(); 
     $(".data2").hide(); 
    } 
    }); 
});

這是一個Java的腳本代碼。

請找工作example

來源

2012-05-24 06:10:19

使用Javascript隱藏默認欄位

回答

相關問題