javascript - HTML 可选择表格，具有编辑/删除/查看选项

Question

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

编辑行的按钮

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

JavaScript 代码

 $(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)
});

模态

<div id="edit">
    <h2 class="text-center ls-large">Edit contact group</h2>
      <form class="js-ajax-form" data-ajax-form="edit=a.logged-in;editFrom=
               <?php echo URL_BASE; ?>template/header.php"
                      name="contacts-form" method="post"
                      action="<?php echo URL_BASE; ?>contactgroups/contactgroup_manager.php?a=edit">
               <fieldset>
                        <!-- <input type="text" name="name" placeholder="Name">-->
                 <div class="input-wrap">
                    <input type="text" name="name" maxlength="45" value="" placeholder="Name">
                 </div>
                 <input type="hidden" name="id" value="">
              </fieldset>
             <div class="controls multiple">
                 <button class="btn btn-default btn-small" type="submit" name="Edit" value="Edit">Submit</button>
                  <a class="btn btn-unimportant btn-small js-popup-close" href="#">Cancel</a>
             </div>
     </form>
</div>   

Answer 1

有两种方法可以实现此目的。

1. 未选择任何行时禁用编辑按钮。
2. 在未选择任何行的情况下按下编辑按钮时显示错误。

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

无论哪种情况，您都需要确保选择一行。因此，如果您在页面加载时使用 disabled 属性禁用编辑按钮:

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

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

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

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

注意我注意到您的编辑“按钮”实际上是一个超链接。如果您想继续使用它，这个答案可能有助于确定如何启用/禁用它: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");
  }
});