Question

我有一个包含3列的数据表：用户名，电子邮件和角色。在第3列（角色）的标题中，有一个“编辑”按钮。单击“编辑”，我想要下拉菜单应该出现在每一行。应该隐藏“编辑”按钮，并且应该出现“保存”按钮。使用以下代码，我可以添加下拉菜单，但我无法从下拉菜单中选择任何内容。

<script type="text/javascript">
$(document).ready(
    function() {
    var oTable = $('#big_table').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": '<?php echo base_url(); ?>index.php/User/datatable',
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "iDisplayStart ":20,
    "oLanguage": {
    "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>"
    },  

    "aoColumnDefs": [
         { "bSortable": false, "aTargets": [ 2 ] }
        ],      

    "fnInitComplete": function() {
       $("#big_table tr").find("th:nth-child(3)").append('<button id = "editTool">Edit</button><button id = "save"> Save </button>');      
            $("#save").hide();
     },
     "fnDrawCallback": function() {
                },
    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            },
            'fnServerData': function(sSource, aoData, fnCallback)
        {
          $.ajax
          ({
            'dataType': 'json',
            'type'    : 'POST',
            'url'     : sSource,
            'data'    : aoData,
            'success' : fnCallback
          });
        }
} );
$("#big_table").on('click',$("#editTool"),function(){
        console.log("editTool click");
            console.log("Edit");
            $("#big_table tbody tr").each(function(index){
            var selected = "Admin1";
            var name = "role"+index;
            var menu = '<?php 
            $options = array(
                'Student'       => 'Student',
                'Contributer'   => 'Contributer',
                'Moderator'     => 'Moderator',
                'Admin1'        => 'Admin 1', 
                'Admin2'        => 'Admin 2',
             );
            $selected = "'+selected+'";
            $val =  form_dropdown("'+name+'", $options,"'+selected+'");
            echo preg_replace( "/\r|\n/","",$val)?>';
            $(this).find("td:nth-child(3)").html(menu);
            $("#editTool").hide();
            $("#save").show();
         });
     });

} );
</script>

Answer 1

我遇到了问题。问题在于以下代码：

    $("#big_table").on('click',$("#editTool"),function(){
      //codes
    });

每次点击#big_table时都会触发此操作。当我第一次点击“编辑”按钮时，会调用此方法并添加下拉框。当我尝试从下拉列表中选择某些内容时，会再次调用此方法，因为单击仍在#bigTable上。我通过以下方式取代上述内容解决了这个问题：

   $("#big_table thead th:nth-child(3)").on('click',$("#editTool"),function(){
    //code
    });

现在，只要单击第三个标头，就会调用此方法。所以现在我可以从下拉菜单中正确选择。但我的目标仍然没有实现。我希望在单击“编辑”按钮时调用此方法，而不是在单击列标题时调用此方法。请提出一些解决方案。

如何在每行数据表中添加下拉列表

1 个答案: