如何在点击链接时更改HTML表格的高度？

嗨我想通过点击一个按钮在2秒内平稳过渡将HTML表格的高度从690更改为400。有没有办法在纯CSS中做到这一点？这里是我的例子：如何在点击链接时更改HTML表格的高度？

<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
<table> 
<tr> 
<td> 
<button type="button">Click Me!</button> 
</td> 
</tr> 
<tr> 
<td height="690" width="1280> <--- This cell needs it height to change to 400px when the button is clicked. 
Cell 1 
</td> 
</tr> 
</table> 
</body> 
</html>

来源

2013-02-15 william44isme

你不能CSS做纯粹的，但是你可以很容易地jQuery做到这一点：

// Use a more specific selector by ID or class 
$('button').click(function (event) { 
    $(this).closest('tr').next().children('td:first').animate({height: 400}, 2000); 
});

来源

2013-02-15 12:32:58

您将需要使用Javascript。使用function click() { document.getElementById('id').setProperty('style', 'height:100px;'); }

而且按钮使用本 - <button onclick="click();">BUTTON</button>

来源

2013-02-15 12:32:52 VladHQ

给ID到按钮（clickbut）和桌子（tableheight）然后用jquery

$(document).ready(function(){ 
    $("#clickbut").click(function(){ 
    $("#tableheight").css('height','somevalue eg:300px'); 
    }); 
});

来源

2013-02-15 12:36:14 Kumar

哇，这个工作gre在，谢谢！有没有办法让它平稳移动，就像过渡一样？ – william44isme 2013-02-16 08:34:17

如何在点击链接时更改HTML表格的高度？

回答

相关问题