【发布时间】：2012-12-15 12:55:42
【问题描述】：
我正在尝试在表格上使用可排序的 jQuery UI，但遇到了问题。一旦我放下一行，高度就不完全是以前的了。它变得更小，并且由于某种原因行不会用完整个表。
我能做些什么来防止这种情况发生？当表中只有 2 行时它非常明显，但当有很多行可用时几乎看不到，我仍然希望对此进行控制。
编辑：
这是关于可排序表中发生的事情，而不是结果表。
显然这个问题只出现在 webkit 中，而不会出现在 Mozilla 或 IE 中。
演示：
http://jsbin.com/ucopun/66/edit
这是我的 js 代码：
$(document).ready(function() {
//sort
$("#myTable").on('click', '.up, .down', function(event) {
var row = $(this).closest("tr");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
row.fadeOut();
row.fadeIn();
});
//fix dd width of rows
$(function() {
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
$("#myTable tbody").sortable({
helper: fixHelper
});
$("#myTable tbody").disableSelection();
});
//buttons
var savebtn = "<div class=\"save\">Save</div>";
var editbtn = "<div class=\"edit\">Edit</div>";
var removebtn = "<div class=\"remove\">Remove</div>";
var upbtn = "<a class=\"up\">up</a><a class=\"down\">down</a>";
$("#target").click(function() {
//add
var speise = $(".addnew").val();
var beschr = $(".addnew2").val();
$('#myTable tr:last').after('<tr class="frst"><td class="content"><span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span></td><td class="btns">' + removebtn + '</td><td class="btns">' + editbtn + upbtn + '</td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
$(this).parent().parent().remove();
});
//edit
$("#myTable").on('click', '.edit', function(event) {
var speise = $(this).closest("tr").find(".speise").text();
var beschr = $(this).closest("tr").find(".beschr").text();
$(this).closest("tr").find(".content").html('<input class="sp" value="' + speise + '"/><br><input class="be" value="' + beschr + '"/>');
$(this).parent().html(savebtn);
});
//save
$("#myTable").on('click', '.save', function(event) {
var speise = $(this).closest("tr").find(".sp").val();
var beschr = $(this).closest("tr").find(".be").val();
$(this).closest("tr").find(".content").html('<span class="speise">' + speise + '</span><span class="beschr">' + beschr + '</span>');
$(this).parent().html(editbtn);
});
//result
});
$("button").click(function() {
var data = "";
$("#myTable tr td:first-child").each(function() {
data += "<tr><td>" + $(this).text() + "</td></tr>";
});
$(".result").html(data);
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table id="myTable">
<tr>
<td class="content">
<span class="speise">SPEISE</span>
<span class="beschr">BESCHREIBUNG</span>
</td>
<td class="btns">
<div class="remove">REMOVE</div></td>
<td class="btns">
<div class="edit">edit</div>
<a class="up">up</a>
<a class="down">down</a>
</td>
</tr>
<tr>
<td class="content">
<span class="speise">SPEISE</span>
<span class="beschr">BESCHREIBUNG2</span>
</td>
<td class="btns">
<div class="remove">REMOVE</div></td>
<td class="btns">
<div class="edit">edit</div>
<a class="up">up</a>
<a class="down">down</a>
</td>
</tr>
</table>
Speise<br>
<input class="addnew" type="text" id="name" />
<br>Beschreibung <br>
<input class="addnew2" type="text" id="name" />
<div id="target">Add</div>
<div id="target2">Add2</div>
<button>Result me</button>
<div><table class="result"></table></div>
<div class="test"></div>
</body>
</html>
CSS
table {
border:solid black 1px;
height:200px;
}
td {
border:solid 1px red;
}
#target {
width:50px;
border:solid red 2px;
}
.remove {
color:red;
font-wieght:bold;
}
.result {
border:solid red 2px;
}
td span, a {
display:block;
}
a {cursor:pointer;}
tr {
cursor:move;
}
.btns {
cursor:auto;
}
此外，如果有一种简单的方法可以在不使用 jQuery UI 而仅使用 jQuery 的情况下进行拖放排序，我会很感激一个链接，因为我觉得这个问题，还有许多其他问题是由 jQuery UI 创建的。
【问题讨论】：
-
你可以使用纯JS对表格进行排序，我通常在服务器的php中对我的表格进行排序并打印出来，你可以使用ajax来避免重新加载，这是我教的
-
我想要拖放。我已经有了一个使用向上/向下按钮的纯 jquery 解决方案，但我还想要 d&d。
-
拖放有点困难，但你可以使用纯 js 代替 jquery ui，恕我直言，这是一个矫枉过正
-
是的，我想在没有 UI 的情况下这样做，但我能找到的一切都是针对 UI...
标签： jquery jquery-ui html-table jquery-ui-sortable