Question

首先让我说我是JavaScript / jQuery的初学者。我刚刚开始学习它，因为我想为我的网站使用一些JavaScript功能。

当您点击编辑按钮时，我想要实现的目标如下：

在：

    <div class="container container-table">
    <div class="row content">
        <div class="col-md-4 text-center">
            <div class="container">
                <div class="well well-sm">
                    <div>
                        <strong>Alle producten</strong>
                    </div>

                </div>
                <div id="products" class="row list-group">
                    <?php
                    $items = $dbh->SelectAllproduct();
                    foreach ($items as $item) {
                    $id = $item['idproduct'];

                    if ($item['bijnaop']==0){
                        $status = "Het product is niet op";

                    }
                    if ($item['bijnaop']==1) {
                        $status = "Het product is bijna op";

                    }
                    if ($item['op']==1) {
                        $status = "Het product is helaas op";
                    }

                        echo '<div class="item  col-xs-12 col-lg-4 col-md-6">
                        <div class="thumbnail">
                            <img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
                            <div class="caption">
                                <h4 class="group inner list-group-item-heading">
                                    ' . $item['productnaam'] . '</h4>
                                <p class="group inner beschrijving list-group-item-text">
                                    ' . $item['productbeschrijving'] . ' <br> Allergieen: '. $item ['allergieen'].'</p>
                                <div class="row">
                                    <div class="col-xs-12 col-md-6">
                                        <p class="lead">
                                          € ' . $item['productprijs'] . ' </p>
                                    </div>
                                    <div class="col-xs-6 col-md-6" >
                                        '.$status.'
                                    </div>
                                    <div class="col-xs-6 col-md-6">
                                        <input type="button" href="#" name="'.$item['productnaam'].'" value = "Voeg toe"></a>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>';
                    }
                    ?>
                </div>
            </div>

        </div>
    </div>
</div>

后：

<body>

<div class="container container-table">
    <div class="row content">
        <div class="col-md-4 text-center">
            <div class="container">
                <div class="well well-sm">
                    <div>
                        <strong>Alle producten</strong>
                    </div>

                </div>
                <div id="products" class="row list-group">
                    <?php
                    $items = $dbh->SelectAllproduct();
                    foreach ($items as $item) {
                        $id = $item['idproduct'];

                        if ($item['bijnaop']==0){
                            $status = "Het product is niet op";

                        }
                        if ($item['bijnaop']==1) {
                            $status = "Het product is bijna op";

                        }
                        if ($item['op']==1) {
                            $status = "Het product is helaas op";
                        }

                        echo '
                        <div class="item  col-xs-12 col-lg-4 col-md-6">
                            <div class="thumbnail">
                                <img class="group list-group-image" src="' . $item['productplaatje'] . '" alt="" />
                                <input type ="text" value="' . $item['productplaatje'] . '">
                                   <div class="caption">

                                        <h4 class="group inner list-group-item-heading">
                                           <input type ="text" value = "' . $item['productnaam'] . '"> 
                                        </h4>

                                        <p class="group inner beschrijving list-group-item-text">
                                            <input type ="text" value="'. $item['productbeschrijving'] . '">

                                        </p>

                                        <p>
                                        <input type ="text" value = "Allergieen: '. $item ['allergieen'].'">
                                        </p>

                                        <div class="row">

                                            <div class="col-xs-12 col-md-6">
                                                <p class="lead">
                                                    <input type = "text" value="€' . $item['productprijs'] . ' "
                                                </p>

                                            </div>


                                            <div class="col-xs-6 col-md-6">

                                            </div>

                                        </div>
                                    </div>
                            </div>
                    </div>';
                    }
                    ?>








                </div>
</body>

我已经查看过如何用输入替换div s的不同脚本，但每次我自己测试它时都不起作用或者它不是我想要的。

编辑：将在几分钟内添加代码

Answer 1

您只需更改div s contentEditable="true"，然后将它们看起来像输入样式。然后完全删除contentEditable以接受更改。

如何将文本替换为输入和可编辑

1 个答案: