Question

我正在使用JS动态构建表，但是由于某些原因，在单击btn_dropdown0“按钮”（应该隐藏并显示tbody）之后，按钮本身会稍微移动左和右。在检查我的代码行为之后，其原因是两个空白的th正在调整大小，这可能是由于tbody可见时，下面一行中的单元格包含一些数据和所以他们会被拉伸。
这是我的表已复制，jQuery处理了效果：

$('#btn_dropdown0').click(function() {
	if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
		$(this).css({'transform': ''});
		$('#tbody0').hide();
	}else{
		$(this).css({'transform': 'rotate(180deg)'});
		$('#tbody0').show();
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Bangkok</th>
                <th scope="col">Milan</th>
                <th scope="col">Flight type: international</th>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
            </tr>
        </thead>
        <tbody id="tbody0" style="display: none;">
            <tr>
                <td>Monday</td>
                <td>15:00</td>
                <td>16:00</td>
                <td>Supported airplanes: 1,4,5</td>
                <td><button class="btn btn-info">Reserve</button></td>
            </tr>
            <tr>
                <td>Tuesday</td>
                <td>22:00</td>
                <td>23:00</td>
                <td>Supported airplanes: 1,4,5</td>
                <td><button class="btn btn-info">Reserve</button></td>
            </tr>
        </tbody>
    </table>

Answer 1

为th添加宽度，它将保持不变。由于th没有宽度，因此它是根据其中内容的大小来选取的。现在，当您单击时，由于滚动条，它会闪烁。以整页模式检查。

$('#btn_dropdown0').click(function() {
	if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
		$(this).css({'transform': ''});
		$('#tbody0').hide();
	}else{
		$(this).css({'transform': 'rotate(180deg)'});
		$('#tbody0').show();
	}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
        <thead class="thead-dark">
            <tr>
                <th scope="col" width="15%">Bangkok</th>
                <th scope="col" width="15%">Milan</th>
                <th scope="col" width="45%">Flight type: international</th>
                <th scope="col" width="10%"></th>
                <th scope="col" width="10%"></th>
                <th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
            </tr>
        </thead>
        <tbody id="tbody0" style="display: none;">
            <tr>
                <td>Monday</td>
                <td>15:00</td>
                <td>16:00</td>
                <td>Supported airplanes: 1,4,5</td>
                <td><button class="btn btn-info">Reserve</button></td>
            </tr>
            <tr>
                <td>Tuesday</td>
                <td>22:00</td>
                <td>23:00</td>
                <td>Supported airplanes: 1,4,5</td>
                <td><button class="btn btn-info">Reserve</button></td>
            </tr>
        </tbody>
    </table>

表格单元格在点击事件后无意中更改了大小

1 个答案: