Question

我正在使用以下脚本将<tr>从表格中的任何位置移动到该表格的顶部。这是在提交ajax表单后发生的。表格 - 而不是按钮的 - 类是“顶级”

$(".top").click(function() {
    var thisRow = $(this).parent().parent();
    var firstRow = thisRow.parent().find("tr:first").not(thisRow);
    thisRow.insertBefore(firstRow);
});

一旦项目到达表格顶部，我想禁用Send Item To Top按钮。问题变得复杂，因为每个<tr>中还有两个按钮：Move Item Up By One和Move Item Down By One（也都是ajax）

将<tr>移至顶部后，我想停用Move Item Up By One以及Send Item To Top按钮。另外，我想在点击Move Item Down By One时重新启用它们。

当<tr>的位置向上/向下移动一个时，以下脚本用于交换。{/ p>

注意：我不能将我的任何按钮指定为id或类，因为它们的表单是动态生成的。我只能为表单分配ID或类。

// Move item down/up
$(".up,.down").click(function(){
    var row = $(this).parents("tr:first");
    if ($(this).is(".up")) {
        row.insertBefore(row.prev());
    } else {
        row.insertAfter(row.next());
    }
});

这是HTML：

<tr id="item_168" class="element168">
    <td><form action=".." class="top..." method="post" onsubmit="..."><input onclick="" type="submit" value="&uarr;" /></form></td>
    <td class="action"><form action="up..." class="up" method="post" onsubmit="..."><input onclick="" type="submit" value="&uarr;" /></form></td>
    <td class="action"><form action="down..." class="down" method="post" onsubmit="..." title="Move one"><input onclick="" type="submit" value="&darr;" /></form></td>
</tr>

Answer 1

这里的事件处理程序分为两部分（为了便于阅读）：

$('#yourTableID').delegate('.up', 'click', function() {
  var row = $(this).closest('tr');
  var index = row.index();

  if(index  != 0) {
    row.insertBefore(row.prev());

    if(index == 1) { 
      $(this).attr('disabled', 'disabled');
    }
  } 

})
.delegate('.down', 'click', function() {
  var row = $(this).closest('tr');
  var index = row.index();

  if(index  < row.siblings().length) {
    row.insertAfter(row.next());

    if(index + 1 == row.siblings().length) {
      $(this).attr('disabled', 'disabled');
    }
  }

});

编辑：将row.insertAfter（row.prev（））更改为row.insertAfter（row.next（））。糟糕！

此外，这是检查它的动作：http://jsfiddle.net/pn3MN/

Answer 2

我对jQuery很新，但是你能做到吗

$(row).find('.up,.top').find('input[type=submit]').attr('disabled', 'disabled')

Answer 3

给你的按钮类或ID，并使用这些钩子启用/禁用/隐藏按钮

如何使用jQuery禁用/启用多个按钮

3 个答案: