JQuery 可编辑表格

最新推荐文章于 2024-08-05 22:35:13 发布

ALLsharps

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： jquery function input border stylesheet html

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <title>可以编辑的表格</title>  
   <!-- <link type ="text/css" rel="stylesheet" href="css/edit.css" />-->  
    <script type="text/javascript" src="jslib/jquery1.5.js"></script>  
    <script type="text/javascript" src="jslib/jqueryedit.js"></script>  
</head>  
<body>  
    <table border="1px">  
  
            <tr>  
                <td>编辑</td>  
                <td>表格</td>  
            </tr>  
  
    </table>  
</body>  
</html>

$(document).ready(function(){  
    var tds=$("td");  
    tds.click(tdclick);  
});  
  
  
function tdclick(){  
         var td=$(this);  
         //1,取出当前td中的文本内容保存起来  
        var text=td.text();  
        //2,清空td里面的内容  
        td.html(""); //也可以用td.empty();  
        //3，建立一个文本框，也就是input的元素节点  
        var input=$("<input>");  
        //4，设置文本框的值是保存起来的文本内容  
        input.attr("value",text);  
        input.keyup(function(event){  
             var myEvent =event||window.event;  
             var kcode=myEvent.keyCode;  
            if(kcode==13){  
                var inputnode=$(this);  
                var inputtext=inputnode.val();  
                var tdNode=inputnode.parent();  
                tdNode.html(inputtext);  
                tdNode.click(tdclick);  
            }  
        });  
        //5，将文本框加入到td中  
        td.append(input);         
       //6,清除点击事件  
        td.unbind("click");  
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../scripts/jquery-1.4.4-vsdoc.js"></script>
<script src="../scripts/jquery.uitableedit.js"></script>
<style type="text/css">
#div2,#div3
{
    position:absolute;
    width:400px;
    height:300px;
    border:1px solid #333333;
    background-color:#777788;
    text-align:center;
    line-height:400%;
    font-size:13px;
    left:80px;
    top:20px;
}
#div3
{
    height:50px;
    position:fixed;
    background-color:#000;
}
</style>
    <script>
        jQuery.fn.size = function () {
            return jQuery(this).get(0).options.length;
        };
        function mouseCoords(ev) {
            if (ev.pageX || ev.pageY) {
                return { x: ev.pageX, y: ev.pageY };
            }
            return {
                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y: ev.clientY + document.body.scrollTop - document.body.clientTop
            };
        }
        $(document).ready(function () {
            var tds = $("td");
            tds.click(tdclick);
            //$("#div").load("http://www.taobao.com/");
            //alert($("#div").offset().left);
            $("#b").mousemove(function (e) {
                var d = mouseCoords(e);
                //.offsetLeft = 100;
                $("#div").css({
                    display: "",
                    left: d.x,
                    backgroundColor: "red",
                    top: d.y + $("#b").height() - 5
                });
                $("#div").html("Left=" + d.x + " ;Top=" + d.y);
            });
            $("#b").mouseleave(function () {
                $("#div").css("display", "none");
            });
            $("#b").click(function () {
                alert($("#s[attd=z]").length);
                var name = ['中国', '美国', '英国', '日本'];
                //alert(name[1]);
                //$.each()遍历数组
                $.each(name, function (key, val) {
                    //回调函数有两个参数,第一个是元素索引,第二个为当前值
                    //alert(key+':'+val);
                    //zalert(key);
                    $("#s").prepend("<option value='" + val + "'>" + val + "</option>");
                });
//                window.setInterval("")
            });
        });
        function tdclick() {
            var td = $(this);
            //1,取出当前td中的文本内容保存起来  
            var text = td.text();
            //2,清空td里面的内容  
            td.html(""); //也可以用td.empty();  
            //3，建立一个文本框，也就是input的元素节点  
            var input = $("<input>");
            //4，设置文本框的值是保存起来的文本内容  
            input.attr("value", text);
            input.blur(function () {
                var inputnode = $(this);
                var inputtext = inputnode.val();
                var tdNode = inputnode.parent();
                tdNode.html(inputtext);
                tdNode.click(tdclick);
            });
            input.keyup(function (event) {
                var myEvent = event || window.event;
                var kcode = myEvent.keyCode;
                if (kcode == 13) {
                    var inputnode = $(this);
                    var inputtext = inputnode.val();
                    var tdNode = inputnode.parent();
                    tdNode.html(inputtext);
                    tdNode.click(tdclick);
                }
            });
            //5，将文本框加入到td中  
            td.append(input);
            input.focus();
            input.select();
            //6,清除点击事件  
            td.unbind("click");
        }



        ///
        var _move = false; //移动标记
        var _x, _y; //鼠标离控件左上角的相对位置
        $(document).ready(function () {
            $("#div3").click(function () {
                //alert("click");//点击（松开后触发）
            }).mousedown(function (e) {
                _move = true;
                _x = e.pageX - parseInt($("#div2").css("left"));
                _y = e.pageY - parseInt($("#div2").css("top"));
                $("#div2").fadeTo(0.2, 0.7); //点击后开始拖动并透明显示
            });
            $(document).mousemove(function (e) {
                if (_move) {
                    var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                    var y = e.pageY - _y;
                    $("#div2").css({ top: y, left: x }); //控件新位置
                }
            }).mouseup(function () {
                _move = false;
                $("#div2").fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明
            }).disableSelection();
        });
    </script>
</head>
<body>
<select id="s" attd="z"></select>
<button id="b">test</button>
<table border="1"><tr><td>ddddddddddddddddddddddddd</td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td>
<div id="div" style=" padding:5px; color:#FFF; position:absolute;left:400px;top:400px;border:1px solid red;width:100px;height:50px;">dd</div></td></tr>
</table>
<table border="1px" style="width: 400px">    

     

            <tr style="height:24px;">    

                <td width="50%">编辑</td>

                <td width="50%">表格</td>    

            </tr>    

     

    </table>    

    <div id="div2">
    <div id="div3"></div>
    sdfasdfasdf
    </div>
</body>
</html>

ALLsharps

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 可编辑表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 可以编辑的表格 -->
复制链接

扫一扫

专栏目录