JQuery实现可以编辑的表格

最新推荐文章于 2023-05-26 15:00:18 发布

贞心真义

最新推荐文章于 2023-05-26 15:00:18 发布

阅读量1.5w

点赞数 5

本文链接：https://blog.csdn.net/jyhye/article/details/8392876

版权

前段时间做项目用到了可以编辑的表格，本篇博客主要是简单总结JQuery部分实现可以编辑的表格，没有与数据库的交互部分，下篇博客会详细解说AJax部分。

首先是准备表格，样式自定，例子中我用了表格很简单的样式。

html

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="editTable.css" rel="stylesheet" />
    
    <script src="jquery.js" type="text/javascript"></script>
       <script src="editTable.js" type="text/javascript"></script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <th>艺术家</th>
            <th>所在职</th>      
       </tr>
        <tr>
            <td>青峯</td>
            <td>主唱</td> 
        </tr>
        <tr  >
            <td>馨仪</td>
            <td>贝斯</td>
        </tr>
        <tr >
            <td>家凯</td>
            <td>吉他</td>
        </tr>
        <tr  >
            <td >阿福</td>
            <td>木吉他</td>
        </tr>
        <tr>
            <td >阿龚</td>
            <td>键盘</td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

样式表

body {
   /*无边距*/
     margin:0px;
    padding:0px;
    /*字体大小*/
    font-size:16px;
  
}   
 /*表格样式*/
table,tr,td,th {

    border:1px solid #A3A3A3;
    border-collapse:collapse;
    background-color:#E4E4E4;
}
td {
    width:200px;
    height:30px;
    text-align:center;
}

js文件

$(function () {
    //找到所有名字的单元格
    var name = $("tbody td:even");
    //给这些单元格注册鼠标点击事件
    name.click(function () {
    
      
        //找到当前鼠标单击的td
        var tdObj = $(this);
        //保存原来的文本
        var oldText = $(this).text();
        //创建一个文本框
        var inputObj = $("<input type='text' value='" + oldText + "'/>");
        //去掉文本框的边框
        inputObj.css("border-width", 0);
        inputObj.click(function () {
            return false;
        });
        //使文本框的宽度和td的宽度相同
        inputObj.width(tdObj.width());
        inputObj.height(tdObj.height());
        //去掉文本框的外边距
        inputObj.css("margin", 0);
        inputObj.css("padding", 0);
        inputObj.css("text-align", "center");
        inputObj.css("font-size", "16px");
        inputObj.css("background-color", tdObj.css("background-color"));
        //把文本框放到td中
        tdObj.html(inputObj);
        //文本框失去焦点的时候变为文本
        inputObj.blur(function () { 
            var newText = $(this).val();
            tdObj.html(newText);        
        });
        //全选
          inputObj.trigger("focus").trigger("select");
    });

});

页面效果：

单击艺术家列，就可以对表格进行修改。

单击其他地方进行了修改

以上主要是利用JQuery进行基础的效果演示，下篇博客将会与数据库交互，真正的进行修改。

贞心真义

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
7
评论
JQuery实现可以编辑的表格

前段时间做项目用到了可以编辑的表格，本篇博客主要是简单总结JQuery部分实现可以编辑的表格，没有与数据库的交互部分，下篇博客会详细解说AJax部分。首先是准备表格，样式自定，例子中我用了表格很简单的样式。 html
复制链接

扫一扫