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

我有表格，您可以在其中选择表格行，并将信息传递到模态窗口。但是有问题，我想在弹出窗口中显示错误，如果没有选择HTML有编辑/删除/查看选项的可选表格

按钮，编辑行

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

来源

2016-07-11 MrEnergy

如果没有行，为什么允许弹出窗口甚至显示？触发弹出窗口/模式的代码未显示，但假设您已经有了一个依赖用户单击某行的函数，则可以触发在该函数中显示模态。这样，如果没有行，用户就不能点击一行，因此无法显示模式。然后你不需要错误信息。 – ADyson

但是如果有行的话，当你点击编辑按钮的时候如何显示该行没有被选中？ – MrEnergy

没有编辑按钮。单击行时直接显示弹出窗口。这对用户来说只需点击一次。他们不必选择一行，然后点击编辑。他们只需点击该行。 – ADyson

行

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

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

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

无论哪种情况，您都需要确保选中一行。所以，如果你在页面加载禁用的编辑按钮，这样使用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"); 
    } 
});

来源

2016-07-11 08:59:52 ADyson

我现在用了第二种方法，稍后会看看我是否可以在模态框中显示消息来改进它。 – MrEnergy

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

回答

相关问题