[mysql]编辑,删除,查看选项的 HTML 可选择表格

发布时间: 2017/4/9 0:26:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有的表,在那里你可以选择表行,和它将信息传递到modal窗口。但有问题,我想要弹出窗口显示错误如果是没有选择的行

按钮以编辑行

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

modal

<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>   

解决方法 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);
});

这样一来,如果不有任何行,永远不会获取启用按钮。

注︰我注意到你编辑"按钮"实际上是一个超链接。如果你想要继续使用的这个答案可能是有助于确定如何启用/禁用它︰禁用使用 css 链接。否则你可能要替换的按钮,或隐藏它反而更好。使超链接 unclickable 更难。

如果你想要下去航线 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");
  }
});
官方微信
官方QQ群
31647020