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有編輯/刪除/查看選項的可選表格

回答

相關問題