• jQuery操作表格的单元格
  • 水滴石穿 发表于 2016/3/23 17:10:00 | 分类标签: jquery 单元格 表格
  •  一,以下是html中body中的代码 
    <body> 
    <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>
    <tr>
    <td>0005</td>
    <td>李小可</td>
    </tr>
    <tr>
    <td>0006</td>
    <td>王萌</td>
    </tr>
    <tr>
    <td>0007</td>
    <td>小明</td>
    </tr>
    </tbody>
    </table>
    </body>
    二,jQuery代码 对以上的表格进行编辑  

    $(function() { 
    //1,实现表格的隔行变色
    //找到表格中所有的偶数行,也就是我们页面中看到的奇数行
    $("tbody tr:even").css("background", "#EFF6FE");
    //2,单元格值的修改
    //找到所有需要编辑的单元格
    var numTd = $("tbody td");
    //给这些单元格注册Click事件
    numTd.click(function() {
    //精简上面的代码
    //找到当前鼠标点击的那个td,this对应的就是响应了click的那个td
    var currTd = $(this);
    if (currTd.children("input").length > 0) {
    //如果当前td中已包含有文本框元素,则不执行click事件
    return false;
    }
    //当前td的内容
    var tdtext = currTd.html();
    //清除td的内容
    currTd.html("");
    //创建一个文本框
    //去掉文本框的边框
    //设置文本框中字体大小和当前td中的字体大小一样,为16px;
    //设置文本框的背景色和当前td背景色一样
    //让文本框的宽度和td的宽度一样
    //将td的内容放到文本框中
    //将文本框插入到td中去
    var inputOjb = $("<input type='text' />").css("border-width", "0").css("font-size", "16px")
    .css("background-color", currTd.css("background-color")).width(currTd.width())
    .val(tdtext).appendTo(currTd);
    //使文本框的内容添加后就被选中(trigger可以执行javascript中的方法)
    inputOjb.trigger("focus").trigger("select");
    //去掉文本框的点击事件,(javascript事件是冒泡型的)
    inputOjb.click(function() {
    return false;
    });
    //处理文本框上回车和ESC按键的操作
    inputOjb.keyup(function(event) {
    //获取当前按下的键盘的键值
    // 不同的按键可以做不同的事情
    var keyCode = event.which;
    //处理回车键 ,不同的浏览器的keycode不同
    if (keyCode == 13) {
    //保存当前输入的内容
    var inputText = $(this).val();
    currTd.html(inputText);
    }
    //处理ESC键的操作
    if (keyCode == 27) {
    //将当前TD的内容还原成tdtext
    currTd.html(tdtext);
    }
    });
    });
    })
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:水滴石穿
  • 加入时间:2014/6/1 14:39:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮