`
DoubleEO
  • 浏览: 158230 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jq实现可以编辑的表格

阅读更多
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery:可以编辑的表格</title>
    <link type="text/css" rel="stylesheet" href="css/editTable.css">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>

<table>
    <thead>
    <tr>
        <th colspan="2">鼠标点击表格可以编辑</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>学号</th>
        <th>姓名</th>
    </tr>
    <tr>
        <td>00001</td>
        <td>张3</td>
    </tr>
    <tr>
        <td>00002</td>
        <td>李4</td>
    </tr>
    <tr>
        <td>00003</td>
        <td>王5</td>
    </tr>
    <tr>
        <td>00004</td>
        <td>赵6</td>
    </tr>
    </tbody>
</table>

</body>
</html>


editTable.js文件

//通过javascript来解决内容部分的奇偶行背景不同
/*
 $(document).ready(function(){

 });*/
//简化写法
$(function() {
    //找到表格的内容区域的奇数行,设定其样式
    $("tbody tr:even").css("background-color", "#ECE9D8");
    //找到所有学号的单元格
    var numTd = $("tbody td:even");
    //给这些单元格注册鼠标点击的事件。
    numTd.click(function() {
        //找到当前的td,this对应的就是相应可cilck的那个td
        var tdObj = $(this);
        if(tdObj.children("input").length()>0){
            //表示里面是有input的文本框,不执行click处理
            return false;
        }
        //取出当前td中的文本值
        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.get(0).select();
        inputObj.click(function(){
           return false; 
        });
        //处理文本框上回车和ESC按键的操作
        inputObj.keyup(function(event){
            //获取当前按键下的键值
            var keycode = event.which;
           //处理回车的情况
            if(keycode == 13){
              //获取当前文本框中的内容
                var inputtest = $(this).val();
                tdObj.html(inputtest);
            }
           //处理esc的情况
             if(keycode == 27){
              tdObj.html(text);
            }
        });
    });
});


分享到:
评论

相关推荐

    JQuery实战--可以编辑的表格

    此外,对于可编辑表格,我们还需要考虑数据验证、错误提示、格式化等功能,这些可以通过添加额外的jQuery代码来实现。例如,可以使用`change`事件来实时验证输入,并通过`addClass()`和`removeClass()`改变单元格的...

    JQuery实现可编辑的表格

    通过以上步骤,我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是,虽然jQuery简化了许多任务,但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能,可能更适合处理复杂的...

    使用JQuery实现的动态编辑表格

    本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...

    vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a

    JQuery实现可编辑表格

    这篇名为“JQuery实现可编辑表格”的博客文章可能深入探讨了如何利用jQuery的功能来创建一个用户可以编辑的表格。在网页设计中,这种功能常用于数据输入或管理应用程序,允许用户直接在表格内修改数据而无需跳转到...

    vue+jq实现商城商品属性的添加以及生成表格并还原到前端展示sku列表

    在本项目中,Vue将用于处理商品属性的添加、编辑和删除,以及根据用户选择生成表格。 jQuery则是一个强大的JavaScript库,主要用于DOM操作、事件处理和动画效果。在这个场景下,jQuery可能被用来简化DOM操作,例如...

    jquery添加表格行内编辑代码.zip

    在这个“jquery添加表格行内编辑代码.zip”压缩包中,包含了一个使用jQuery实现的表格行内编辑功能的示例。下面将详细解释这个功能的实现原理和涉及的技术点。 首先,`demo.html`是主页面文件,它通常会包含HTML...

    jQuery实现动态更改table表格数据

    2. **创建可编辑表格**:设置表格单元格为可编辑,可以通过添加`contenteditable`属性实现。例如: ```html 初始数据 ``` 3. **监听用户交互**:使用jQuery的`.on()`方法监听表格单元格的`click`事件。当用户...

    jquery实现生成表格

    在实际应用中,你可能还需要考虑表格的样式和布局,这可以通过CSS来实现。可以为`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;th&gt;`和`&lt;td&gt;`添加类名,然后在CSS文件中定义相应的样式规则。 综上所述,利用jQuery生成表格的核心在于理解和...

    jquery 操作表格

    6. **AJAX交互**:结合jQuery的`.ajax()`方法,可以实现表格数据的异步加载和更新,比如从服务器拉取或提交数据。 7. **插件扩展**:jQuery有许多用于表格操作的插件,如Datatables,它可以提供排序、过滤、分页等...

    jq富文本插件编辑器

    【jq富文本插件编辑器】是一款用于...总的来说,这款jq富文本插件编辑器结合jQuery和LayUI,为开发者提供了一种简单易用的方法来实现网页的文本编辑功能,无论是框架还是原生环境,都能轻松集成,提升项目的用户体验。

    jquery实现类Excel表格

    《使用jQuery实现类似Excel的Web表格》 在Web开发中,有时我们需要在网页上展示大量数据,并且希望用户能够进行类似Excel的操作,如编辑、排序、筛选等。这时候,使用jQuery来实现一个类Excel的表格就显得尤为重要...

    jq弹性表格控件

    5. **丰富的API和事件**:提供丰富的API接口和事件回调,开发者可以通过这些接口实现与表格的交互,如排序、筛选、编辑等操作。 6. **插件扩展**:作为jQuery插件,tilesjs可以与其他jQuery插件无缝集成,如数据...

    jq文本编辑器

    "jq文本编辑器"充分利用了jQuery的这些特性,提供了一套完整的工具栏,包括字体设置、字号调整、文本对齐、插入图片、链接创建、表格操作等常见功能,使得用户可以直接在浏览器中进行类似桌面文字处理软件的操作。...

    JQ实现DIV大小、位置拖动调整源码

    这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案,它使得开发者能够为网页上的元素添加动态的拖放功能,提升用户体验。 jQuery(简称JQ)是一个轻量级的JavaScript库,它简化了HTML文档遍历、...

    jQuery表格编辑添加删除行代码.zip

    "jQuery表格编辑添加删除行代码"就是针对这一需求提供的一种解决方案,它利用JavaScript库jQuery的强大功能,实现了在表格中对数据进行编辑、添加和删除等操作。本文将详细解析这一代码实现的原理和应用。 首先,...

    基于Bootstrap使用jQuery实现简单可编辑表格

    editTable.js 提供编辑表格当前行、添加一行、删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列;(这里的操作包括 编辑当前行、在当前行下...

    jquery实现的类似excel功能的表格

    可编辑的类似于excel功能的jQuery开发的表格,功能上还有很多的缺陷,望网上的各位牛人大哥们。帮小弟优化一下。并完善其功能 现在可以实现,添加或附加行列,删除行和列。简单的合并行或列。现在想将其添加到...

    Jquery datagrid实现单元格编辑

    通过以上步骤,你可以构建一个允许用户直接在表格单元格内编辑数据的交互式Web应用。不过,需要注意的是,jqGrid虽然强大,但其社区支持和更新已不如以前活跃,现在有更多现代的前端框架如React、Vue和Angular提供了...

    jQuery 实现双击编辑表格功能

    本文将详细介绍如何使用 jQuery 来实现一个双击编辑表格的功能。 首先,我们需要一个基本的 HTML 结构来创建表格。虽然在提供的描述中没有给出具体的 HTML 代码,但可以假设我们有如下结构: ```html 数据1 ...

Global site tag (gtag.js) - Google Analytics