如何通过单击整行而不是“编辑”按钮来显示模态

Question

I was able to get their corresponding ID from the array by adding attribute to my button, I was wondering if how can make popped up my modal by clicking whole table row instead of clicking the Edit button

My functional modal by clicking edit button:

<!--script for fetching data from db-->
<script>
    $(document).ready(function(){
        var dataTable=$('#example').DataTable({
            "processing": true,
            "serverSide":true,
            "ajax":{
                url:"fetch.php",
                type:"post"
            }
        });
    });
</script>
<!--script js for get edit data-->
<script>
    $(document).on('click','#getEdit',function(e){
        e.preventDefault();
        var per_id=$(this).data('id');
        //alert(per_id);
        $('#content-data').html('');
        $.ajax({
            url:'editdata.php',
            type:'POST',
            data:'id='+per_id,
            dataType:'html'
        }).done(function(data){
            $('#content-data').html('');
            $('#content-data').html(data);
        }).fial(function(){
            $('#content-data').html('<p>Error</p>');
        });
    });
</script>

heres my fetch.php

$query=mysqli_query($con,$sql);
$data=array();
while($row=mysqli_fetch_array($query)){
    $subdata=array();
    $subdata[]=$row[0]; //id
    $subdata[]=$row[1]; //name
    $subdata[]=$row[2]; //salary
    $subdata[]=$row[3]; //age           //create event on click in button edit in cell datatable for display modal dialog           $row[0] is id in table on database
    $subdata[]='<button type="button" id="getEdit" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal" data-id="'.$row[0].'"><i class="glyphicon glyphicon-pencil">&nbsp;</i>Edit</button>
                <button type="button" class="btn btn-danger btn-xs"><i class="glyphicon glyphicon-trash">&nbsp;</i>Delete</button>';
    $data[]=$subdata;
}

heres my editdata.php

if(isset($_REQUEST['id'])){
    $id=intval($_REQUEST['id']);
    $sql="select * from pcfields_data WHERE pcfield_id=$id";
    $run_sql=mysqli_query($con,$sql);
    while($row=mysqli_fetch_array($run_sql)){
        $per_id=$row[0];
        $per_name=$row[1];
        $per_salay=$row[2];
        $per_age=$row[3];
    }

Answer 1

You need to use class name for your action button instead of ID because ID should be unique.

I will use btn-primary as a class name for edit button and btn-danger as an example of class name for delete button.

The solution is to attach click event handler to both "Edit" button and any table cell and prevent event propagation by using stopPropagation() function.

// Handle click on "Edit" button or any table cell
$('#example').on('click', 'tbody .btn-primary, tbody td', function(e){
   // Prevent event propagation
   e.stopPropagation();

   var $row = $(this).closest('tr');
   var data = table.row($row).data();

   alert('Edit ' + data[0]);
});

// Handle click on "Delete" button
$('#example').on('click', 'tbody .btn-danger', function(e){
   // Prevent event propagation
   e.stopPropagation();

   var $row = $(this).closest('tr');
   var data = table.row($row).data();

   alert('Delete ' + data[0]);
});

See this example for code and demonstration.