Question

我有以下html结构，如此小提琴所示 - https://jsfiddle.net/0r277q7r/4/

table1中的某些行是shwon并在检查复选框时隐藏，如下所示 -

function hideshow(){
    if($('#checkShow').is(':checked')){
        $('.before').hide();
        $('.after').show();
  }else{
        $('.before').show();
        $('.after').hide();
  }
}

当您选中复选框时，会隐藏table1中的某些行，并显示其他行。

我希望在table1的高度发生变化时更改table2的高度，以便两个表的高度相等。

jquery代码是什么样的？

感谢。

Answer 1

使用toggle()函数

，您的jquery可以减少到2行

function hideshow() {
    $('.before').toggle();
  $('.after').toggle();
}

如果您为主表添加id说table1并将第二个表格更改为id table3，请为table1指定一个高度在px中，然后将table2和table3的高度更改为100％

＆＃13;

function hideshow() {
  $('.before').toggle();
  $('.after').toggle();
}

＆＃13;

#table1 {
  height: 100px;
}
#table2 {
  height: 100%;
}
#table3 {
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="border:1px solid black">
  <tr>
    <td>
      <table style="border:1px solid black" id="table2">
        <tr class="before">
          <td>some content</td>
        </tr>
        <tr class="before">
          <td>some content</td>
          <td>some other content</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="checkShow" onclick="hideshow();" />
          </td>
        </tr>
        <tr class="after" style="display:none">
          <td>show only when check is checked</td>
        </tr>
      </table>
    </td>
    <td>
      <table style="border:1px solid black" id="table3">
        <tr>
          <td>other div2 stuff here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

试试这个：

$(document).ready(function(){

    $("#checkShow").on("change",function(){

        var state = $(this).prop("checked");

        if (state) {
            $('.before').hide();
            $('.after').show(); 
        }

        else {
            $('.before').show();
            $('.after').hide();

        }

    })
})

最终代码：

＆＃13;

<html>
    <title>This is test</title>
    <head>
    </head>
    <body>
        
<table border="1">
    <tr>
        <td>
            <table style="border:1px solid black" id="table2">
                <tr class="before">
                    <td>some content</td>
                </tr>
                <tr class="before">
                    <td>some content</td>
                    <td>some other content</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="checkShow"/></td>
                </tr>
                <tr class="after">
                    <td>show only when check is checked</td>
                 </tr>
                    </table>
                  </td>
                  <td>
                    <table style="border:1px solid black" id="table2">
                    <tr>
                  <td>other div2 stuff here</td>
                </tr>
                </table>
              </td>
            </tr>
            </table>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
    $(document).ready(function(){

        $("#checkShow").on("change",function(){

            var state = $(this).prop("checked");

            if (state) {
                $('.before').hide();
                $('.after').show(); 
            }

            else {
                $('.before').show();
                $('.after').hide();

            }

        })
    })
        </script>
    </body>
</html>

＆＃13;

JQuery自动更改div的高度

2 个答案: