sur*_*ajR 1 html html-table jquery-ui-resizable
我有两个表,其中包含id sample1和sample2.sample1包含<th class="header">和sample2包含<td class="desc">.我想要做的就是当我<th>在sample1中调整大小时,它也应该<td>在同一个同步中自动调整sample2中的大小.我正在使用jQuery resizeable()方法,但我没有得到它.
请帮忙.
这是代码供参考:
<script type="text/javascript" charset="utf-8">
$(function() {
$("#sample1 .header").resizable();
$("#sample2 .desc").resizable();
});
</script>
</head>
<body>
<div class="center" >
<table id="sample1" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="header">header</th><th class="header">header</th>
</tr>
</table>
<table id="sample2" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
</table>
</div>
</body>
</html>
这应该这样做:
$(function() {
$("#sample1 .header").resizable({
alsoResize: "#sample2 .desc"});
$("#sample2 .desc").resizable({
alsoResize: "#sample1 .header"});
});
还可以看看这里的 JQuery可调整大小的api
更新:
你可以这样做.
<html>
<head>
<style>
.header,.desc{
width: 100px;
}
</style>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#sample1 .header").resizable({
alsoResize: "#sample2 .desc"});
$("#sample2 .desc").resizable({
alsoResize: "#sample1 .header"});
});
</script>
</head>
<body>
<div class="center">
<table id="sample1" border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="header">header</th>
<th class="header">header</th>
</tr>
</table>
<table id="sample2" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
<tr>
<td class="desc">cell</td>
<td class="desc">cell</td>
</tr>
</table>
</div>
</body>
</html>