JQuery-可以编辑的表格

最新推荐文章于 2019-01-12 17:05:18 发布

hxy87

最新推荐文章于 2019-01-12 17:05:18 发布

阅读量375

点赞数

分类专栏： JQuery 文章标签： function stylesheet border table xhtml input

本文链接：https://blog.csdn.net/hxy87/article/details/5860024

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditTable.aspx.cs" Inherits="Web.Two.EditTable" %>

<!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 runat="server">
<title>JQuery实例2-可以编辑的表格</title>

</head>
<body>
    <form id="form1" runat="server">
    <table>
        <thead>
            <tr>
                <th colspan="2">
                鼠标点击表格项就可以编辑
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>
                学号
                </th>
                <th>
                姓名
                </th>
            </tr>
            <tr>
                <td>
                00001
                </td>
                <td>
                张三
                </td>
            </tr>
            <tr>
                <td>
                00002
                </td>
                <td>
                李四
                </td>
            </tr>
            <tr>
                <td>
                00003
                </td>
                <td>
                王五
                </td>
            </tr>
            <tr>
                <td>
                0004
                </td>
                <td>
                老六
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</body>
</html>

Css.css样式代码:

.userText
{
/*控件文本框的边框是红色的实线*/
border:1px solid red;
    background-image:url(../image/userName.jpg);
    background-repeat:repeat-x;
    background-position :bottom ;
}
table
{
border:1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse:collapse;
width:400px;
}
table td
{
border:1px solid black;
width:50%;
}
table th
{
border:1px solid black;
width:50%;
}
tbody th
{
background-color:#A3bae9;
}

EditTable.js代码:

//在整个页面装载完成之后完成
$(function(){

    //找到表格的内容区域中除了第一个tr以外所有的偶数行
    //使用even是为了把通过tbody返回的所有tr元素中，在数组里面下标是偶数的元素返回,因为这些元素，实际上才是我们期望的tbody
    //里面的奇数行
    $("tbody tr:even").css("background-color","#ece9d8")
    //我们需要找到所有的学号单元格
   var numTd = $("tbody td:even");
   //给这些单元格注册鼠标点击的事件
   numTd.click(function(){
    //找到当前鼠标点击的td,this对应的就是响应了click的那个td
    var tdObj = $(this);
    if(tdObj .children("input").length>0){
        //当前td中有ipnut，不执行click处理
        return false ;
    }
    var text = tdObj .html();
    //清空 td中的内容
    tdObj .html(" ");
    //创建一个文本框
    //去掉文本框的边框
   //设置文本框的文字字体大小是16px
   //使文本框的宽度和td的宽度相同
    //设置文本框的背景色
    //需要将当前td中的内容放到文本框中
    //将文本框插入到td中
    var inputObj = $("<input type='text'>").css("border-width","0") .css("font-size","16px")
                   .width(tdObj .width()).css("background-color",tdObj .css("background-color"))
                   .val(text).appendTo(tdObj);
    //使文本框插入之后就被选中
    inputObj .trigger("focus").trigger("select");
    inputObj .click(function(){
        return false ;
    });
    //处理文本框上回车和esc按键的操作
    inputObj .keyup(function(event){
        //获取当前按下键盘的键值
        var keycode = event.witch;
        //处理回车键的情况
        if(keycode == 13){
            //获取当前文本框的内容
            var inputtext = $(this).val();
            //将td的内容修改成文本框的内容
            tdObj .html(inputtext);
        }
        //处理esc的情况
        if(keycode == 27){
            //将td中的内容还原成text
            tdObj .html(tdObj.html());
        }
    });
   });
});

hxy87

关注

0
点赞
踩
0

收藏

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

<br /><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditTable.aspx.cs" Inherits="Web.Two.EditTable" %><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xml
复制链接

扫一扫