Question

我有一个HTML表，使用AJAX从数据库中获取该表的tbody数据并尝试从表中选择一行并在点击按钮时发送值以进行删除。但它不适用于通过AJAX传递到tbody标记的行，仅适用于thead上的行。

的index.html

    <?php
    include("config.php");
?>
<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <title>Müşteri</title>
    <script src="jquery-1.12.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="site.js"></script>
    <style>
        td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}

        .selected {
            background-color: blue;
            color: #FFF;
        }

    </style>

</head>

<body>

<form  name="insert" id="insert" action="" method="post">
     <tr>
      <td>İsim</td>
      <td><input type="text" name="isim" id="isim"  ></td>
     </tr>
     <tr>
      <td>Soyisim</td>
      <td><input type="text" name="soyisim" id="soyisim"    ></td>
     </tr>
     <tr>
      <td>Tel</td>
      <td><input type="text" name="tel" id="tel">   </td>
     </tr>
     <tr>
      <td>E-mail</td>
      <td><input type="text" name="email" id="email"    ></td>
     </tr>
     <tr>
      <td colspan="2" align="center"><input type="button" name="btn_add" id="btn_add" value="Müşteri Ekle"></td>
     </tr>
     <tr>
      <td colspan="2" align="center"><input type="button" name="btn_delete" id="btn_delete" value="Müşteri Sil"></td>
     </tr>
</form><br>


<div class="table-responsive">
        <table class="table table-striped" id="table">
        <thead>
        <tr>
            <th>Id</th>
            <th>Isim</th>
            <th>Soyisim</th>
            <th>Telefon</th>
            <th>E-mail</th>
         </tr>
         </thead>
         <tbody id="live_data">    
         <!--data from database-->
         </tbody>
</table>
</div>  



</body>
</html>

site.js

    // JavaScript Document

$(document).ready(function() 
{"use strict";  
    function fetch_data ()
    {
        $.ajax({
        type:"POST",
        url: "select.php",  
        dataType: 'json',       
        success:function(data)
            {
                 $('#live_data').html(data);            
            }       
            });
    }
    fetch_data();       
    function submitForm()
    {       
            var data = $("#insert").serialize();            
            $.ajax({                
            type : 'POST',
            url  : 'insert.php',
            data : data,
            success :  function()   
                {       
                alert("Müşteri Eklendi");               
                }
            });
    }
    $(document).on('click','#btn_add',function(){
        submitForm();   
        fetch_data();   
    });
    $("#table>tbody tr").click(function(){
                $(this).addClass('selected').siblings().removeClass('selected');    
        var value=$(this).find('td:first').html();

    });
    $('.btn_delete').on('click', function(e){
            alert($("#table>tbody tr.selected td:first").html());
    });

}）;

select.php

    <?php

    include("config.php");
    $output='';
    $sql= $db_con->query("SELECT * FROM musteri ORDER BY mid ASC");
    $count=$sql->rowCount();
            if($count > 0 ){


                foreach($sql as $row){
                    $output .='<tr><td>'.$row["mid"].'</td>
                               <td>'.$row["isim"].'</td>
                               <td>'.$row["soyisim"].'</td>
                               <td>'.$row["tel"].'</td>
                               <td>'.$row["email"].'</td>                              
                               </tr>';



                }
            }
    echo json_encode($output);

?>

如何在tbody标记上选择一行并从数据库中获取

0 个答案: