2

かなり単純に見えるものがありますが、困惑しています。表示されるテーブル行数に影響するテーブル内のドロップダウンが必要です。デフォルトでは、2 行のみが表示されます。ドロップダウンで 4 を選択すると、4 行が表示されます。非表示の行の 1 つしか表示されず、2 つの行を非表示の div にもラップしようとしましたが、うまくいきませんでした。アイデア？

  <table border="1">
          <tr>
            <td class="noBG" colspan="3">
              <select id="displayText" onchange="javascript:toggle();">
                <option>2</option>
                <option>4</option>
              </select>Items
            </td>
          </tr>
          <thead>
            <tr>
              <th>Dates</th>
              <th>Time</th>
              <th>Person</th>
            </tr>
          </thead>
            <tr>
              <td>12/3</td>
              <td>12:45</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>12/4</td>
              <td>12:45</td>
              <td>James Doe</td>
            </tr>
            <tr id="toggleText" style="display: none">
              <td>12/4</td>
              <td>12:45</td>
              <td>Janey Doe</td>
            </tr>
            <tr id="toggleText" style="display: none">
              <td>12/4</td>
              <td>12:45</td>
              <td>Janey Doe</td>
            </tr>
        </table>

        <script language="javascript"> 
        function toggle() {
            var ele = document.getElementById("toggleText");
            if(ele.style.display == "block") {
                    ele.style.display = "none"; 
            }
            else {
                ele.style.display = "block";
            }
        } 
        </script>
        ​
4

3 に答える 3

2

display: block;テーブルの行が正しく表示されないため、使用は機能しません。ただし、で定義されているクラスを追加および削除することで、可視性を切り替えることができますdisplay: none;。したがってdisplay: none/block;、クラスを切り替える必要はありません。

これは動作します (jQuery を含む): http://jsfiddle.net/Yuvvc/1/

JS 関数には次のコードを使用できます。

function toggle() {
    $.each($('tr[name=toggleText]'), function() {
        $(this).toggleClass("hiddenRow", $(this).attr('class') != "hiddenRow");
    });
}

2 番目のパラメーター (bool) を.toggleClass使用すると、クラスを追加および削除できます。

編集

jQuery 以外のバージョンは次のとおりです。

function toggle() {
    var rows = document.getElementsByName("toggleText");
    for(var i=0; i<rows.length; i++)
    {
        rows[i].className = (rows[i].className == "hiddenRow") ? "" : "hiddenRow";
    }
}
于 2013-01-02T22:46:41.813 に答える
0

すべて<tr id="toggleText"を<tr name="toggleText"に変更してから、トグル機能を次のように変更します。

function toggle() {
    var ele = document.getElementsByName("toggleText");
    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display == "block") { 
            ele[i].style.display = "none";
        }
        else {
            ele[i].style.display = "block";
        }
    }
}
于 2013-01-02T22:21:12.130 に答える