0

我正在尝试在表格上使用可排序的 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 创建的。

4

2 回答 2

2

为您的表格 tr 使用固定高度：

#myTable tr{height:100px}

看演示

于 2012-12-31T10:51:26.857 回答
0

height:200px;从中删除table，它会好的。

要获得具有相同高度的结果表，请执行以下操作：

$("button").click(function() {
    var data = "";
    $("#myTable tr td:first-child").each(function(){
        data+= '<tr style="height:' + $("#myTable tr").height() + '"><td>' + $(this).text() + '</td></tr>';
    });
    $(".result").html(data);
});

结果比你有相同的高度..

在你的 jsbin 上播放：http: //jsbin.com/ucopun/73/edit

于 2012-12-31T11:11:56.870 回答