-2

2つの行を非表示にしようとしてい<tr><td>line 1</td></tr>ますが、これらの行を<tr><td>line 2</td></tr>divでラップしてdisplay:nonesetを使用していますが、これらの行は非表示になりません。なんで?

<script type="text/javascript">
  function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
      ele.style.display = "none";
      text.innerHTML = "Show";
    } else {
      ele.style.display = "block";
      text.innerHTML = "Hide";
    }
  } 
</script>

<table>
  <tr>
    <td>
      <a id="displayText" href="javascript:toggle();">Show</a>
    </td>
  </tr>

  <div id="toggleText" style="display: none;">
    <tr><td>line 1</td></tr>
    <tr><td>line 2</td></tr>
  </div>
</table>
4

2 に答える 2

3

HTMLマークアップが無効です。テーブルの子要素としてdivを使用することはできません。

于 2013-02-04T15:09:39.680 に答える
1

divをテーブル内に配置する場合は、テーブルセル内、つまりtd内に配置する必要があります。idは一意であることが意図されているため、クラス名で2つのdivを選択していることに注意してください。

<script language="javascript"> 
 function toggle() {
    var ele = document.getElementsByClassName("toggleText");
    var text = document.getElementById("displayText");
    if(ele[0].style.display == "block") {
        ele[0].style.display = "none";
        ele[1].style.display = "none";
        text.innerHTML = "Show";
    }
    else {
        ele[0].style.display = "block";
        ele[1].style.display = "block";
        text.innerHTML = "Hide";
    }
} 
</script>
<table>

    <tr><td>
    <a id="displayText" href="javascript:toggle();">Show</a>
    </td></tr>

    <tr><td><div class="toggleText">line 1</div></td></tr>
    <tr><td><div class="toggleText">line 2</div></td></tr>

</table>
于 2013-02-04T15:13:49.410 に答える