Question

我有表，您可以在其中选择表行，并将信息传递给模态窗口。但是有问题，如果没有选择行，我希望弹出窗口显示错误

按钮编辑行

Cache-control: max-age=0, must-revalidate

JavaScript代码

<a class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>

模态

 $(document).on('click', '#table_contactgroups tbody tr', function(e) {
    $(this).addClass('selected').siblings().removeClass('selected');

    var name = $(this).find('td:first').html();
    var id = $(this).attr('id');

    $('#edit input[name="name"]').val(name)
    $('#edit input[name="id"]').val(id)

    $("#name").text(name);
    $('#delete input[name="id"]').val(id)
});

Answer 1

有两种方法可以解决这个问题。

未选择任何行时禁用编辑按钮。
按下编辑按钮但未选择任何行时显示错误。

可以说第一个更加用户友好，因为它阻止了他们进行不必要的点击。

在任何一种情况下，您都需要确保选择了一行。因此，如果您在页面加载时使用disabled属性禁用编辑按钮：

<button type="button" id="EditButton" disabled>Edit</button>

然后在用户点击某行时运行的现有函数中，您可以启用它，因为您现在有一个选定的行：

$(document).on('click', '#table_contactgroups tbody tr', function(e) {
  //...
  $("#EditButton").prop('disabled', false);
});

这样，如果没有行，按钮永远不会被启用。

N.B。我注意到你的编辑“按钮”实际上是一个超链接。如果您想继续使用它，这个答案可能有助于确定如何启用/禁用它：Disable link using css。否则，最好用按钮替换它，或者隐藏它。使超链接无法点击更加困难。

如果您想沿着路线2向下，并在未选择任何行时显示错误消息，则必须处理超链接的单击事件。首先，给它一个id。

<a id="EditLink" class="icon icon-pencil js-popup js-tooltip" href="#edit" title="Edit selected row"></a>

然后处理点击，并检查所选行。由于您使用“.selected”类来表示选定的行，因此这很容易测试。

$("#EditLink").click(function(event) {
  if ($(".selected").length == 0)
  {
    event.preventDefault(); //stops the normal click behaviour from occurring
    alert("Please select a row to edit");
  }
});

带有编辑/删除/查看选项的HTML可选表

1 个答案: