JQuery经典例子：页面可编辑表格

最新推荐文章于 2020-03-24 15:54:27 发布

一支支穿云箭

最新推荐文章于 2020-03-24 15:54:27 发布

阅读量8.1k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/mengdonghui123456/article/details/50512791

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天学习了使用JQuery实现可编辑的table 表格。把学习成果分享下。其实整个过

程很简单，没有用很多高深的函数和复杂的算法。如果对JQuery的和HTML的一些交互不

熟悉的话建议看看这篇博客《JQuery与HTML元素的获取、设置、添加、删除》

思路：

创建表格→创建文本框→将文本框放到表格的单元格→将单元格的值赋给文本框

（清除单元格）→将文本框编辑过的新值赋值给单元格。

代码：

HTML：

<span style="font-family:SimSun;font-size:24px;"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsEditTable.aspx.cs" Inherits="JQueryDemo.JsEditTable" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery之可以编辑的表格</title>
    <link href="CSS/CssEditTable.css" rel="stylesheet" />
    <script src="JS/jquery.js"></script>
    <script src="JS/JSEditTable.js"></script>
</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>0001</td>
                           <td>张三</td>
                   </tr>
                    <tr >
                           <td >0002</td>
                           <td >李四</td>
                    </tr>
                     <tr >
                            <td >0003</td>
                            <td >王五</td>
                    </tr>
                     <tr >
                            <td>0004</td>
                            <td>赵六</td>
                     </tr>               
                    </tbody>
        </table>
    </form>
</body>
</html>
</span>

CSS：

<span style="font-family:SimSun;font-size:24px;">table {
    /*设置body 的边框，使得页面显示出表格*/
    border: 1px solid black;
    /*将单元格之间的空格消去*/
    border-collapse:collapse ;
     width :400px;
}

table td {
      border:1px solid black;
      width :50%;
}

table th {
      border:1px solid black;
      width:50px;
}

tbody th {
      background-color :#808080;

}
</span>

JS：

<span style="font-family:SimSun;font-size:24px;">//使用JavaScript来解决奇偶行背景变色的问题

$(function(){

    //找到表格中所有的奇数行
    $("tbody tr:even").css("background-color", "red");

    //找到表格中所有的偶数行
    $("tbody tr:odd").css("background-color", "green");

    //找到所有学号的单元格(奇)
    var numTd = $("tbody td:even");

    //给单元格注册鼠标点击事件
    numTd.click(function () {

        //找到当鼠标点击单元格时，对应的dom 对象（单元格）
        var tdObj = $(this);
        if (tdObj.children("input").length > 0) {
            return false;

        }
        //获取当前单元格的内容
        var text = tdObj.html();

        //创建一个文本框
        var inputObj = $("<input type='text'>");

        //去掉文本框的边框;设置文本框的文字大小和整体一样
        inputObj.css("border-with", "0").css("font-size","16px")

        //使文本框的宽度和td的宽度相同
        inputObj.width(tdObj.width());

        //设置文本框的背景色
        inputObj.css("background",tdObj.css("background-clor"));

        //需要将当前td中的内容放入到文本框中
        inputObj.val(text);
      
        //清空td中的内容
        tdObj.html("");
       
        //将文本框插入到对应的td(单元格)中
        inputObj.appendTo(tdObj);

        //文本框插入后被选中
        inputObj.trigger("focus").trigger("select");

        //单元格触发单击事件没有任何返回值
        inputObj.click(function () {
            return false;
        });

        //处理文本框上回车和Esc事件
        inputObj.keydown(function (event){
            //获取当前按下键盘的键值
            var keycode = event.which;

            //处理回车事件
            if (keycode ==13) {
                
                //获取当前文本框中的内容
                var inputtext = inputObj.val();
                //将td的内容修改成文本框中的内容
                tdObj.html(inputtext);
                return false;
                
            }

            //处理esc事件
            if (keycode == 27) {

                alert(inputObj.val());
                alert(text);
                //将单元格的内容改变成原来的内容
                tdObj.html(text);
            }
        });

    });
          

});</span>