jquery——双击编辑异步更新(双击内容变input框可编辑，失去焦点后修改的数据异步提交)

最新推荐文章于 2021-06-04 01:36:12 发布

danson_yang

最新推荐文章于 2021-06-04 01:36:12 发布

阅读量3.5k

点赞数

分类专栏： javascript jquery

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery_dblclick.js"></script>
</head>
<body>


    <table border="1">
    <thead>
      <tr>
        <td>标题</td>
        <td>时间</td>
        <td>地点</td>
      </tr>
    <thead>
    <tbody>
      <tr id="1">
        <td fd="t">第一个</td>
        <td fd="d">2012</td>
        <td fd="a">上海</td>
      </tr>
      <tr id="2">
        <td fd="t">第二个</td>
        <td fd="d">2012</td>
        <td fd="a">北京</td>
      </tr>
      <tr id="3">
        <td fd="t">第三个</td>
        <td fd="d">2012</td>
        <td fd="a">济南</td>
      </tr>
    </tbody>
    </table>
</body>
</html>

js页面

$(function() {
    $("tbody>tr>td").dblclick(function(){
        var inval = $(this).html();                            //获得td里的html内容
        var infd = $(this).attr("fd");                        //获得td的fd属性的值
        var inid = $(this).parent().attr("id");                //获得td的父节点id属性的值

    //把td里的html内容变为input框，并赋值
        $(this).html("<input type='text' id='edit"+infd+inid+"' value='"+inval+"'>");

    //input框获得焦点，以及失去焦点后的处理
        $("#edit"+infd+inid).focus().live("blur",function() {
            var editval = $(this).val();                //获得input框中的值

            $(this).parent().html(editval);                //把得到的值赋给input框父节点的html

        //post表单提交
            $.post("jquery_dblclick.php",{id:inid,fd:infd,val:editval},function(data) {
                alert(data);
            })
        })
    })
})

php页面:

<?php
    header( "Content-Type:text/html;charset=UTF-8");

    $conn = mysql_connect("localhost","root","");
    mysql_select_db("test",$conn);
    mysql_query("set names utf8");

    echo $val = $_POST[val];

?>