【Demo】jQuery 可编辑表格

最新推荐文章于 2021-11-03 17:27:42 发布

weixin_30838921

最新推荐文章于 2021-11-03 17:27:42 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/lymblog/p/7463548.html

版权

功能实现：

（1）设定单元格的单击事件，判定被单击单元格是否已经是可编辑状态；

（2）取出单元格原有内容，想单元格中加入文本框，并把原有内容显示在文本框中；

（3）当用户编辑完成或者取消编辑后，将文本框的值取出，删除文本框，并将值在单元格中显示。

效果图：

原始表格

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <style media="screen">
        table {
            border-collapse: collapse;
            border-color: rgba(205, 193, 222, 0.84);
        }
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>
                    &nbsp;编号&nbsp;
                </th>
                <th>
                    &nbsp;语言&nbsp;
                </th>
                <th>
                    &nbsp;课时&nbsp;
                </th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>c001</td>
                <td>c#</td>
                <td>80</td>
            </tr>
            <tr>
                <td>c002</td>
                <td>Java</td>
                <td>70</td>
            </tr>
            <tr>
                <td>c003</td>
                <td>PHP</td>
                <td>60</td>
            </tr>
            <tr>
                <td>c004</td>
                <td>Perl</td>
                <td>50</td>
            </tr>
        </tbody>
    </table>

   <script>
        $(document).ready(function() {
            $('tbody tr td').click(function(){            //单元格单击事件
                var alerttd = $(this);
                if (alerttd.children('input').length > 0) {        //判断单元格是否是编辑状态
                        return false;                
                }
                var htmlcontent = alerttd.html();            //取出单元格原有内容
                alerttd.html("");                    //清空单元格内容
                var textbox = $("<input type='text' />").css("border-width","1").css("background-color","gray").width(alerttd.width()).val(htmlcontent).appendTo(alerttd);
                //将文本框加入单元格并显示原有内容
                textbox.trigger("focus").trigger("select");
                textbox.click(function(){
                    return false;
                });
                textbox.keyup(function(event){
                    var keycode = event.which;
                    if (keycode == 13) {        //用户单击回车键，刷新单元格内容
                        var inputtext = $(this).val();
                        alerttd.html(inputtext);
                    }
                    if (keycode == 27) {        //单击Esc键表示放弃编辑内容，显示原始单元格内容
                        alerttd.html(htmlcontent);
                    }
                });
                
            });
            
        });
    </script>
    
  
</body>

</html>

转载于:https://www.cnblogs.com/lymblog/p/7463548.html

weixin_30838921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Demo】jQuery 可编辑表格

功能实现：（1）设定单元格的单击事件，判定被单击单元格是否已经是可编辑状态；（2）取出单元格原有内容，想单元格中加入文本框，并把原有内容显示在文本框中；（3）当用户编辑完成或者取消编辑后，将文本框的值取出，删除文本框，并将值在单元格中显示。效果图：完整代码：<!DOCTYPE html><html><head>...
复制链接

扫一扫