Question

我正在尝试实现实时表编辑，但是我的select options遇到了一些问题。 input type="text"完全正常。

自从我尝试添加select以来，它似乎制止了我的整个布局。首先，页面上显示了多个行和列。但是现在只有一个，并且在包含select的列之后列显示为空。

第二个问题是因为我在标记中添加了select，因此ajax不会发布表编辑。我认为这是因为加价打破了，但我不确定。

如果有人知道该怎么做，我会很感激。

标记

<?php
    $query = ("select * from projectlist");
    $resultaat = mysql_query($query) or die (mysql_error());
    while($row = mysql_fetch_array($resultaat, MYSQL_ASSOC)){
        $id = $row['projectid'];
?>

    <tr class="predit">
    <form action="" method="post">
        //Working input
        <td>
            <span id="klant_<?php echo $id; ?>" class="text"><?php echo $row["Klant"]; ?></span>
            <input type="text" class="ip" id="klant_ip_<?php echo $id; ?>" value="<?php echo $row["Klant"]; ?>">
        </td>

        //Same approach, but with select instead of input
        <td>
            <span id="project_<?php echo $id; ?>" class="text"><?php echo $row["Project"]; ?></span>
            <select id="project_ip_<?php echo $id; ?>" class="ip">
                <?php
                    //Fetch select options from another table
                    $query = ("select * from projecten");
                    $resultaat = mysql_query($query) or die (mysql_error());
                    while($row = mysql_fetch_array($resultaat, MYSQL_ASSOC)){
                        $listid = $row["projectcode"];
                        $projectnaam = $row["projectnaam"];
                ?>
                    <option value="<?php echo $projectnaam; ?>" id="<?php echo $listid; ?>"><?php echo $projectnaam; ?></option>
                <?php
                    }
                ?>
            </select>
        </td>
    </tr>
    </form>
<?php
    }
?>

JQuery Ajax

$(document).ready(function(){
    //Projeclist
    $(".predit").click(function(){
        var ID=$(this).attr('id');

        $("#klant_"+ID).hide();
        $("#project_"+ID).hide();

        $("#klant_ip_"+ID).show();
        $("#project_ip_"+ID).show();
    }).change(function(){
        var ID=$(this).attr('id');
        var klant=$("#klant_ip_"+ID).val();
        var project=$("#project_ip_"+ID).val();

        var dataString = 'id='+ ID
        +'&Klant='+klant
        +'&Project='+project;
        //alert(dataString);

        var project_txt = $("#project_ip_"+ID+" option:selected").text();

        $.ajax({
            type: "POST",
            url: "post_table.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#project_"+ID).html(project_txt);
                $("#klant_"+ID).html(klant);
            },
            error: function (request, error) {
                console.log(arguments);
                alert(" Can't do because: " + error);
            },
        });
    });

    $(".ip").mouseup(function() {
        return false
    });

    $(document).mouseup(function(){
        $(".ip").hide();
        $(".text").show();
    });
});

post_table.php

<?php
    include('config.php');

    $klant = $_POST['Klant'];
    $project = $_POST['Project'];
    $id = $_POST['id'];

    $query = "update projectlist
    set Klant='$klant',
    Project='$project'
    where projectid='$id'";
    mysql_query($query, $con);
?>

选择选项会中断标记而不会发布

0 个答案: