0
我試圖使用jQuery UI排序在表上，並遇到問題。一旦我放下一排，高度就不像以前那樣。它變小了，出於某種原因，行不會佔滿整個桌子。jQuery可排序錶行 - 排序後行更改高度
我能做些什麼來防止這種情況？當表中只有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用戶界面，但僅使用jQuery我將不勝感激一個鏈接，因爲我覺得這個問題，很多人是通過創建jQuery UI。
爲表格TR
您可以使用排序表普通的JS，我通常在服務器上對我的表格進行排序並打印出來，你可以使用ajax來避免重新加載，只是我想教我的方法 – Qchmqs
我想拖放。我已經有一個純粹的jQuery解決方案使用向上/向下按鈕，但我想d＆d另外。 – user1721135
拖放有點困難，但你可以使用純js而不是jQuery UI，恕我直言，這是一個過度殺傷 – Qchmqs