Question

我在表格行（tr）中选择了选项字段和自由输入字段。当我选择一些选项时，该领域会感觉到ajax。

当我添加新行时，我想感觉输入字段是新行而不是第一行。

是表格html代码：

<table class="table table-bordered" id="tbl1">
        <tr id="rowId">
            <td>
                <select class="form-control" onchange="fetch_select(this.value)">
                    <option></option>
                    <?php
                        $conn  = mysqli_connect('localhost','root','','trailers');
                        $query = "SELECT * FROM trailers";
                        $run   = mysqli_query($conn,$query);

                        while($row = mysqli_fetch_array($run)){
                            $id = $row[0];
                            echo '<option value="'.$id.'">'.$id.'</option>';
                        }
                    ?>  
                </select>
            </td>
            <td><input type="text" name="text" class="form-control" placeholder="Movie Name" value="" readonly></td>
        </tr>
    </table>

我的Java脚本代码

function fetch_select(val){
    $.ajax({
        type: 'post',
        url: 'rs.php',
        data: {
            get_option:val
        },
        success: function (response) {
            document.getElementById("rowId").innerHTML=response;
        }
    });
}

添加/删除java脚本代码：

 $(document).ready(function(){
    var cnt = 2;
    var a   = '<?php $query = "SELECT * FROM trailers";
                        $run   = mysqli_query($conn,$query);

                        while($row = mysqli_fetch_array($run)){
                            $id = $row[0];
                            echo "<option>".$id."</option>";
                        }?>';

    $("#anc_add").click(function(){


    $('#tbl1 tr').last().after('<tr><td></td><td><input type="text" name="text" class="form-control" placeholder="Movie Name" value="" readonly></td></tr>');
        $('#tbl1 tr:last-child td:first').append('<select class="form-control" onchange="fetch_select(this.value)"><option></'+a+'</select>');
    cnt++;
    });

$("#anc_rem").click(function(){
    if($('#tbl1 tr').size()>1){
        $('#tbl1 tr:last-child').remove();
        }else{
        alert('One row should be present in table');
        }
        }); 
});

这是我的rs.php

<?php

$conn = mysqli_connect('localhost','root','','trailers');

$req = $_POST['get_option'];

if(isset($req)){

    $query = "SELECT * FROM trailers WHERE id = '$req'";
    $run   = mysqli_query($conn,$query);

    while($row = mysqli_fetch_array($run)){
        $nm    = $row[1];

        echo '<tr>';
            echo '<td><select class="form-control" readonly></select></td>';
            echo '<td><input type="text" class="form-control" name="text" value="'.$nm.'"></td>';
        echo '</tr>';

        exit;
    }
}

Answer 1

在这种情况下，您使用：

$('#rowId').append(response);

点击此处：http://api.jquery.com/append/

我想在工作表tr中使用ajax响应内部html

1 个答案: