JQuery实现可以编辑的表格

来源：互联网发布：淘宝扫码付款被骗编辑：程序博客网时间：2024/06/07 02:28

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

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

html

[html] view plain copy
 print?
<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>  

样式表

[html] view plain copy
 print?
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文件

[javascript] view plain copy
 print?
$(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进行基础的效果演示

0 0