jquery实现合并单元格及可编辑表格

最新推荐文章于 2023-07-24 17:37:03 发布

程序员奋斗者GO

最新推荐文章于 2023-07-24 17:37:03 发布

阅读量218

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_37896260/article/details/109145428

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

jquery实现合并单元格及可编辑表格

代码片.

<html>
    <head>
        <title>表格编辑</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/merge_table.js"></script>
    </head>
<body>
<style>
    .edit_table tr td,.edit_table tr{
        height: 38px;
        padding:0 10px;
    }
    .edit{
        width: 100%;
        height: 100%;
    }
    .add_btn{
        position: relative;
        float: right;
        font-size: 17px;
        cursor: pointer;
    }


    #mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;}
    #myMenu{position: absolute;z-index: 9999;background: #ece9e9;border-radius: 5px;
        border: 1px solid #ece9e9;width: 80px;height: auto;}
    #myMenu ul{margin-left: -25px;}
        #myMenu ul li{list-style: none;width: 100px;height: auto;cursor: pointer;line-height: 25px;}
        #myMenu ul li:hover{color:#2196F3}
        img{height: 30px;width: 30px;}
        td{font-size: 20px;cursor: pointer;}
        a{text-decoration: none;color: black;}
        a:hover{color: white;background: black;}
</style>
<table width="795" class="edit_table"  border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td width="150" style="width:150px">标题</td>
        <td colspan="5">内容</td>
        <td colspan="1">得分</td>
    </tr>
    <tr>
        <td style="width:150px">公司电话</td>
        <td colspan="3"> </td>
        <td colspan="2" style="width:150px">公司传du真</td>
        <td width="150"> </td>
    </tr>
    <tr>
        <td style="width:150px">发票地址</td>
        <td colspan="3"> </td>
        <td colspan="2" style="width:150px">公司地址</td>
        <td>重庆zhi</td>
    </tr>
    <tr>
        <td style="width:150px">网址</td>
        <td colspan="3"> </td>
        <td colspan="2" style="width:150px">成交度</td>
        <td>可以合作</td>
    </tr>
    <tr>
        <td style="width:150px">成立日期</td>
        <td style="width:100px"> </td>
        <td style="width:100px">公司资本额</td>
        <td colspan="2" style="width:200px"> </td>																									
        <td>公司性质</td>
        <td style="width:150px"> </td>
    </tr>
</table>
<!-- <button id="hbtb1">合并</button> -->
<!-- 右键菜单按钮 -->
<div id="myMenu" >
    <ul>
        <li id="hbtb">合并</li>
        <li id="add_row">添加行</li>
        <li id="del_row">删除行</li>
    </ul>
  </div>
  <!-- <div id="mask"> </div> -->

<script type="text/javascript">
    $(function(){
        //------------------点击单元格编辑------------------
        //$('table td').click(function(){
        $(document).on("click","table td",function(){
            if(!$(this).is('.input')){
                var val = $(this).text();
                $(this).addClass('input').html('<textarea class="edit">'+ val +'</textarea>')
                .find('textarea').focus().blur(function(){
                    
                    $(this).parent().removeClass('input').html($(this).val() || 0);
                });
            }
        }).hover(function(){
            $(this).addClass('hover');
        },function(){
            $(this).removeClass('hover');
        });
        
        //当前行
        var $thisRow = "";
        //------------------显示右键菜单------------------
        $('#myMenu').hide();
        //$('.edit_table tr').on("contextmenu",function(e){
        $(document).on("contextmenu",".edit_table tr",function(e){
            $thisRow = $(this);
            $('#myMenu').show(100);
            $('#myMenu').css({
                'top':e.pageY+'px',
                'left':e.pageX+'px'
            });
           
            e.stopPropagation();
            return false;
        });

        //添加行
        $("#add_row").click(function(){
            console.log($thisRow.parent())
            $thisRow.after("<tr>" + $thisRow.html() + "</tr>")
            //console.log($thisRow)
            //sconsole.log($(".edit_table").html($(".edit_table").html()))
        })
        // $("table tr,table tr td .add_btn").mouseover(function(){
        //     if($(this).html().indexOf("textarea") == -1){
        //         //$(this).append('<span class="add_btn">┼</span>')
        //     }
			
		// }).mouseout(function(){
		// 	$(".add_btn").remove();
        // });
        
        // $(".add_btn").click(function(event){
        //     event.stopPropagation();
        // })
    });

</script>
<style>
.cannotselect{-moz-user-select:none;-webkit-user-select:none;
-ms-user-select:none;-khtml-user-select:none;user-select:none;}
td.selected{background:#0094ff;color:#fff}td.hide{display:none}
</style></body></html>
(http://www.w3dev.cn/article/20160304/jquery-table-td-merge-plugin.aspx)

程序员奋斗者GO

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery实现合并单元格及可编辑表格

这里写自定义目录标题代码片.<html> <head> <title>表格编辑</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/merge_table.js"></script>
复制链接

扫一扫