Question

我有一个页面，其中我有一个带有n（动态增加）行数的表，每行的表包含一个输入字段，我想在表中每行的输入字段中的keyup上执行ajax。阿贾克斯只在第一排工作，而其他任何东西都没有。

PHP

<?php  $count=rowCount(); // UDF Returning no of rows
        for($i=1;$i<=10;$++){
?>
<tr>
    <td><input type="text" name="name" id="search" /></td>
</tr>
<?php 
}
?>

JS

$(document).ready(function(){
    $( "#search" ).focus();
    // Search Studnet Records.
    $("#search").keyup(function(){
        var name = $("#search").val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                $("#show").html(d);
            }

        });
    });
});

fees_recipt_extra2.php

if (isset($_POST['display'])) 
{
    $name = mysqli_real_escape_string($conn,$_POST['name']);
        if($name)
        {
            $query = mysqli_query($conn,"SELECT * FROM students WHERE name  LIKE '%$name%' OR fathers_name  LIKE '%$name%' OR surname  LIKE '%$name%' OR id  LIKE '%$name%' LIMIT 10");
            if(mysqli_num_rows($query))
            {
                    echo"<table class='table table-hover tb1'>";
                        echo"<tr class='danger'>";
                            echo"<td >IMAGE</td>";
                            echo"<td >ID</td>";
                            echo"<td >DEPT</td>";
                            echo"<td >COURSE</td>";
                            echo"<td >NAME</td>";
                            echo"<td >F-NAME</td>";
                            echo"<td >SURNAME</td>";
                            echo"<td >Action</td>";
                        echo"</tr>";    
                while($data=mysqli_fetch_assoc($query))
                {           
                            $id=$data['id'];
                            $img=$data['image'];
                            if($id==find_id_in_feesreceipt_temp_table($id))
                            {
                                continue;
                            }
                        echo"<tr class='clickable-row' data-href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id'>";
                            echo"<td cellpadding='0'> <img src='Assests/profile_images/$img' width='50'></td>";
                            echo"<td >". $data['id']            ."</td>";
                            echo"<td >". $data['dept']          ."</td>";
                            echo"<td >". $data['course']        ."</td>";
                            echo"<td >". $data['name']          ."</td>";
                            echo"<td >". $data['fathers_name']  ."</td>";
                            echo"<td >". $data['surname']       ."</td>";
                            echo"<td ><a href='includes/fees_recepit_save_data_into_temp_table.php?std_id=$id' class='btn btn-primary btn-xs'>Append</a> </td>";
                        echo"</tr>";
                }
                    echo"</table>";

Answer 1

使用类而不是ID-s。 ID是唯一的，只能用于一个输入，而类可以提供多个标记。

<td><input type="text" name="name" class="searchable-input" value="<?php echo $data['full_name'] ?>" id="search"></td>

在jQuery中将ajax函数分配给这个类。

$(".searchable-input").keyup(function(){ 
     //ajax function here
});

希望这就是你要求的。在其他情况下，回复我的评论并提供更多解释。

Answer 2

取而代之的是var name = $('#search').val() should be $(this).val()。而且你应该总是尝试委托，如果你有动态内容也可以通过脚本执行。

$("td").on('keyup', '#search', function(){});

Answer 3

首先，避免为多个元素分配相同的ID。 name属性也是如此。如果需要，在您的情况下分配类而不是ID。但是，您可以像这样绑定keyup事件（假设表有ID，例如使用'tableid'）

$(document).ready(function(){
    $("table#tableid td>input:first-child").focus();
    // Search Student Records.
    $('table#tableid td>input[type="text"]').on("keyup", function(){
        var name = $(this).val();
        // alert('working');
        $.ajax({
            url:"fees_receipt_extra2.php",
            type:"POST",
            async:false,
            data:{
                "display": 1,
                "name":name
            },
            success:function(d){
                d = d.trim();
                $("#show").html(d);
            }
        });
    });
});

这会将keyup和其他AJAX事件绑定到表行中的每个输入。

Ajax不工作：如何为同一页面上的多个文本输入设置相同的ajax函数

3 个答案: