締切済み

テーブルで表示する『列』を絞り込みたい

2008/07/28 09:42

XHTMLで、英語／日本語それぞれの書かれたリスト的なもの(もくじ)を作成しています。　|Introduction　　　 | はじめに　　　| p1| 　|About the Author | 著者について | p2| 　|Chapter 1　　　　　 | 第１章　　　　 | p3| といった感じです。３列に渡ってしまうので、<dl><dt><dd>ではなく、<table>で表記しています。そして、この目次を　|Introduction | p1| や　|はじめに | p1| という風に、「日本語訳を表示しない」もしくは「英語原文を表示しない」それと「両方表示する」の３種類で切り替えたいのです。 OKWaveにあった過去の質問、　ブルダウン選択でページの表示内容を絞り込みたい　http://okwave.jp/qa3018153.html を参考に、<colgroup>を使っていじってみましたが、どうもうまくいかず…

TaoRan
お礼率0% (0/2)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

noname#84373

2008/08/04 17:09 回答No.2

<html> <body> <input type="radio" name="a" onClick="view(1)">日本語訳を表示しない <input type="radio" name="a" onClick="view(2)">英語原文を表示しない <input type="radio" name="a" onClick="view(3)" checked>両方表示する <table border="1" id="t"> <tr><td>Introduction<td>はじめに<td>p1 <tr><td>About the Author <td>著者について<td>p2 <tr><td>Chapter 1<td>第１章<td>p3 </table> <script> function view(n){ tobj = document.getElementById('t'); ty = tobj.rows.length; for(i=0;i<ty;i++){ tobj.rows[i].cells[0].style.display=(n&1)?'inline':'none'; tobj.rows[i].cells[1].style.display=(n&2)?'inline':'none'; } } </script></body> </html>

himajin100000
ベストアンサー率54% (1660/3060)

2008/07/28 13:25 回答No.1

とりあえずメモ: 自分もdisplay:noneの時の挙動を理解できていません。 displayプロパティが継承されないってことまでは解るんだけど http://archivist.incutio.com/viewlist/css-discuss/74211 http://www.quirksmode.org/css/columns.html http://www.w3.org/TR/CSS21/tables.html#columns nth-childとか使ったりclass属性を付けたりあまりしたくはないのだが良い方法が思いつかない。xml:lang属性をいちいちつけるのもなあ