当我在表格中添加表格时,此脚本会停止工作,那么如何使其工作? 我不需要任何jQuery解决方案,我想要纯JavaScript。这是我在互联网上找到的脚本:
<script>
function show_hide_column(col_no, do_show) {
var stl;
if (do_show) stl = 'block'
else stl = 'none';
var tbl = document.getElementById('id_of_table');
var rows = tbl.getElementsByTagName('tr');
for (var row=1; row<rows.length;row++) {
var cels = rows[row].getElementsByTagName('td')
cels[col_no].style.display=stl;
}
}
</script>
这是我的 HTML :
<table id='id_of_table' border=1>
<tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
<tr><td> 2</td><td> two</td><td> deux</td><td> zwei</td></tr>
<tr><td> 3</td><td> three</td><td> trois</td><td> drei</td></tr>
<tr><td> 4</td><td> four</td><td>quattre</td><td> vier</td></tr>
<tr><td> 5</td><td> five</td><td> cinq</td><td>fünf</td></tr>
<tr><td> 6</td><td> six</td><td> six</td><td> sechs</td></tr>
</table>
这是我的表格:
<form>
Enter column no: <input type='text' name=col_no><br>
<input type='button' onClick='javascript:show_hide_column(col_no.value, true);' value='show'>
<input type='button' onClick='javascript:show_hide_column(col_no.value, false);' value='hide'>
</form>
答案 0 :(得分:22)
如果你可以利用col
标签解决方案,纯粹的javascript,很简单:
<table id='id_of_table' border=1>
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col class="col4"/>
<tr><td colspan="4"><table><tr><td></td></tr></table></td></tr>
<tr><td> 2</td><td> two</td><td> deux</td><td> zwei</td></tr>
<tr><td> 3</td><td> three</td><td> trois</td><td> drei</td></tr>
<tr><td> 4</td><td> four</td><td>quattre</td><td> vier</td></tr>
<tr><td> 5</td><td> five</td><td> cinq</td><td>fünf</td></tr>
<tr><td> 6</td><td> six</td><td> six</td><td> sechs</td></tr>
</table>
您可以向col应用几个css属性,但可见性就是其中之一
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
参考文献:
答案 1 :(得分:9)
您可以使用children
并检查他们的tagName
以确保他们是td
。像这样:
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var rows = tbl.getElementsByTagName('tr');
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].children;
if (col_no >= 0 && col_no < cols.length) {
var cell = cols[col_no];
if (cell.tagName == 'TD') cell.style.display = do_show ? 'block' : 'none';
}
}
}
修改:这是一个有效的例子:http://jsfiddle.net/3DjhL/2/。
修改强>:
事实上,我刚刚记得rows
和cols
属性,这使得它更简单。请参阅http://jsfiddle.net/3DjhL/4/以查看其实际效果。
function show_hide_column(col_no, do_show) {
var rows = document.getElementById('id_of_table').rows;
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].cells;
if (col_no >= 0 && col_no < cols.length) {
cols[col_no].style.display = do_show ? '' : 'none';
}
}
}
哦,如果你认为列号应该从1开始(它们没有),你必须在某处偏移。例如,在show_hide_column()
的顶部:
col_no = col_no - 1;
答案 2 :(得分:1)
我遇到一种情况,即修改每个TD值并添加适当的类名以便我可以切换它是一件非常麻烦的事情。结果我写了一些JavaScript来自动完成。请参阅以下代码。
tbl = document.getElementById("Mytable")
classes = getClasses(tbl.rows[0]);
setClasses(tbl, classes);
toggleCol("col0");
toggleCol("col1");
function getClasses(row){
var cn = 0;
var classes = new Array();
for(x=0; x < row.cells.length; x++){
var cell = row.cells[x];
var c = new Column(cell.textContent.trim(), cell.offsetLeft, cell.offsetLeft + cell.offsetWidth, x);
classes[x]= c;
}
return classes;
}
function Column(name, left, right, cols) {
this.name = name;
this.left = left;
this.right = right;
this.cols = cols;
}
function setClasses(table, classes){
var rowSpans = new Array();
for(x=0; x < table.rows.length; x++){
var row = table.rows[x];
for(y=0; y < row.cells.length; y++){
var cell = row.cells[y];
for(z=0; z < classes.length; z++){
if(cell.offsetLeft >= classes[z].left && cell.offsetLeft <= classes[z].right){
cell.className = "col" + classes[z].cols;
}
}
}
}
}
function toggleCol(name){
var cols = document.getElementsByClassName(name);
for(x=0; x < cols.length; x++){
cols[x].style.display= (cols[x].style.display == 'none') ? '' : 'none';
}
}
在我的例子中,我看一下设置顶级标题的第一行(在我的例子中,我有几个有colspans的人)。它使用offsetLeft和offsetWidth来确定顶部标题的范围(在我的情况下具有子标题),以便所有子列都可以与其父标题切换。
基于这些值,setClasses为所有元素设置适当的类。
在我的例子中,我然后切换“col0”和“col1”,因此它们将是不可见的(再次运行该函数会使它们再次可见)。