jQuery实现表格双击修改可保存，取消放弃保存

实现表格双击可修改，修改后保存按钮提交，取消则不提交。

表格代码：

<table>
    <tr>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
    </tr>
    <tr>
        <th>1</th>
        <td id='xx1'>你好</td>
        <td id='xx2'>你好</td>
    </tr>
    <tr>
        <th>2</th>
        <td id='xxx1'>试试</td>
        <td id='xxx2'>试试</td>
    </tr>
</table>

实现表格中td都可以修改(th不做修改）， JS代码（这部分代码与table代码在同一个页面）:

<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">

    function refresh() {
        self.location.reload();
    }
    $(function(){
        $('table td.edit').dblclick(function(){
            if(!$(this).is('.input')){
                $(this).addClass('input').html('<form><input type="text" value="'+ $(this).text() +'" autofocus /><input type="submit" value="Save" /><input type="button" onclick="refresh()" value="Cancel"></form>').find('form').click().submit(function(){
                        var thisid = $(this).parent().siblings("th:eq(0)").text();
                        var thisvalue=$(this).find('input').val();
                        var thisclass = $(this).parent().attr("id");

                        $.ajax({
                            type: 'POST',
                            url: 'Update.php',
                            data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue
                        });
                    $(this).parent().removeClass('input').html($(this).find('input').val() || 0);
                });
            }
        }).hover(function(){
            $(this).addClass('hover');
        },function(){
            $(this).removeClass('hover');
        });
    });
</script>

传递这个表格的对应的第一个序号为thisid，新输入的内容为thisvalue，表格对应的属性id为thisclass，将这些参数传递到Update.php：

<?php
    define('DB_HOST', 'localhost');
    define('DB_USER', 'xxx');
    define('DB_PASS', 'xxx');
    define('DB_NAME', 'xxx');

    $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASS,DB_NAME);

$id = trim($_REQUEST['thisid']);
$thisclass = trim($_REQUEST['thisclass']);
$thisvalue= trim($_REQUEST['thisvalue']);

if (substr_count($thisclass," ")>0){
    $thisclass=str_replace(" ","",$thisclass);
}
if (substr_count($thisclass,"input")>0){
    $thisclass=str_replace("input","",$thisclass);
}
$update_sql = "update Build_Data set $thisclass='$thisvalue' where Build_Id='$id'";
if (!mysqli_query($dbc,$update_sql)) {
    printf ("Error Message: %s\n", mysqli_error($dbc));
}
?>