(js) скрыть/показать столбец таблицы
Здравствуйте! Мне необходимо предоставить пользователю возможность скрывать или отображать столбцы таблицы. Простое управление видимостью ячеек не подходит, так как в заголовке содержатся объединенные ячейки и из-за этого возникают искажения. Например:
[HTML]<script>
var tableId = 'testtable';
function hide(index){
var tbl = document.getElementById(tableId);
for (var i=0; i<tbl.rows.length; i++)
tbl.rows.cells[index].style.display='none';
}
function show(index){
var tbl = document.getElementById(tableId);
for (var i=0; i<tbl.rows.length; i++)
tbl.rows.cells[index].style.display=(navigator.appName.indexOf('Microsoft')!=-1)?'block':'table-cell';
}
</script>
<table border="1" id="testtable">
<thead>
<tr><th>часть1</th><th colspan="2">часть2</th><th>часть3</th></tr>
<tr>
<th><input type="button" value="скрыть" onclick="hide(0)"></th>
<th><input type="button" value="скрыть" onclick="hide(1)"></th>
<th><input type="button" value="скрыть" onclick="hide(2)"></th>
<th><input type="button" value="скрыть" onclick="hide(3)"></th>
</tr>
</thead>
<tbody>
<tr><td>11</td><td>211</td><td>221</td><td>31</td></tr>
<tr><td>12</td><td>212</td><td>222</td><td>32</td></tr>
</tbody>
</table>
<br>показать: <input type="button" value="1" onclick="show(0)">
<input type="button" value="2" onclick="show(1)">
<input type="button" value="3" onclick="show(2)">
<input type="button" value="4" onclick="show(3)">
[/HTML]
Как быть? Желаемый результат - а-ля MS Excel.
[HTML]<script>
var tableId = 'testtable';
function hide(index){
var tbl = document.getElementById(tableId);
for (var i=0; i<tbl.rows.length; i++)
tbl.rows.cells[index].style.display='none';
}
function show(index){
var tbl = document.getElementById(tableId);
for (var i=0; i<tbl.rows.length; i++)
tbl.rows.cells[index].style.display=(navigator.appName.indexOf('Microsoft')!=-1)?'block':'table-cell';
}
</script>
<table border="1" id="testtable">
<thead>
<tr><th>часть1</th><th colspan="2">часть2</th><th>часть3</th></tr>
<tr>
<th><input type="button" value="скрыть" onclick="hide(0)"></th>
<th><input type="button" value="скрыть" onclick="hide(1)"></th>
<th><input type="button" value="скрыть" onclick="hide(2)"></th>
<th><input type="button" value="скрыть" onclick="hide(3)"></th>
</tr>
</thead>
<tbody>
<tr><td>11</td><td>211</td><td>221</td><td>31</td></tr>
<tr><td>12</td><td>212</td><td>222</td><td>32</td></tr>
</tbody>
</table>
<br>показать: <input type="button" value="1" onclick="show(0)">
<input type="button" value="2" onclick="show(1)">
<input type="button" value="3" onclick="show(2)">
<input type="button" value="4" onclick="show(3)">
[/HTML]
Как быть? Желаемый результат - а-ля MS Excel.
а если помучать ширину требуемого столбца?
tbl.rows.cells[index].style.width=0
tbl.rows.cells[index].style.width=0
в скрываемых столбцах, если у их заголовка есть colSpan, тоже ставьте colSpan=1:
[HTML]<table border="1" id="testtable">
<thead>
<tr><th>часть1</th><th colspan="2">часть2</th><th>часть3</th></tr>
<tr>
<th><input type="button" value="скрыть" onclick="hide(0)"></th>
<th><input type="button" value="скрыть" onclick="hide(1)"></th>
<th><input type="button" value="скрыть" onclick="hide(2)"></th>
<th><input type="button" value="скрыть" onclick="hide(3)"></th>
</tr>
</thead>
<tbody>
<tr><td>11</td><td colspan=1>211</td><td colspan=1>221</td><td>31</td></tr>
<tr><td>12</td><td colspan=1>212</td><td colspan=1>222</td><td>32</td></tr>
</tbody>
</table>[/HTML]
а потом в скрипте проверяйте есть ли свойство [COLOR="Blue"]colSpan[/COLOR] у оставшегося видимого столбца - и меняете его на соответствующее значение (в данном случае при сокрытии рядом стоящего - на 2, при его появлении - на 1).
[HTML]<table border="1" id="testtable">
<thead>
<tr><th>часть1</th><th colspan="2">часть2</th><th>часть3</th></tr>
<tr>
<th><input type="button" value="скрыть" onclick="hide(0)"></th>
<th><input type="button" value="скрыть" onclick="hide(1)"></th>
<th><input type="button" value="скрыть" onclick="hide(2)"></th>
<th><input type="button" value="скрыть" onclick="hide(3)"></th>
</tr>
</thead>
<tbody>
<tr><td>11</td><td colspan=1>211</td><td colspan=1>221</td><td>31</td></tr>
<tr><td>12</td><td colspan=1>212</td><td colspan=1>222</td><td>32</td></tr>
</tbody>
</table>[/HTML]
а потом в скрипте проверяйте есть ли свойство [COLOR="Blue"]colSpan[/COLOR] у оставшегося видимого столбца - и меняете его на соответствующее значение (в данном случае при сокрытии рядом стоящего - на 2, при его появлении - на 1).