Question

我在“表格”中有多个（数百个）“span”元素。如果单击一个，我只希望将一个span元素内联编辑，并将数据发送到mySQL以动态更新字段。我做了搜索，但无法找到答案

<?php
// db connect and SELECT query done here...
    while($row = $result->fetch_assoc()){

    echo '<tr bgcolor="'.$bgcolor.'"><td><b>'.$row['eventTitle'] . '</b></td><td>'. $row['dateYear'] .'</td><td>'.$row['characterPOV'].'</td></tr>';
    echo '<tr><td colspan=3><span id="tb" >'.$row['desc'] . '</span></td></tr>';
}
?>

Jquery的：

<script>
        $('document').ready(function(){   
        $( "span#tb" ).on( "click", function() {
            var html = $('span#tb').html();
                $('span#tb').replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus();
                $.get( 'inc/updateDesc.php' ,function(data) {
                    $('#tb').append(data);
                });
                return false;
            })
        });
</script>

目前，如果单击span元素，则每个span元素都被textarea替换 - 我只想将已单击的元素替换为textarea，以便可以对其进行内联编辑

什么是代码高效的负责任的方式来做到这一点？回想一下，span元素的数量可以是数百个，因为它的内容存储在db

中

Answer 1

将ID更改为课程：

  class="tb"

现在在js中你可以这样做：

   $(document).ready(function(){   
    $( "span.tb" ).on( "click", function() {
        var $this = $(this); // this is clicked span.
        var html = $this.html();
            $this.replaceWith('<textarea style="width:100%;">'+html + '\r\n </textarea>').html().focus();
            $.get( 'inc/updateDesc.php' ,function(data) {
                $this.append(data);
            });
            return false;
        })
    });

Jquery：使用Ajax进行内联编辑的多个元素

1 个答案: