zoukankan      html  css  js  c++  java
  • Jquery可修改表格

    真正的代码:

    <th>标题

    若一个两列的表格。

    编号。姓名

    对编号列可以进行修改。

    则。对应的TD是偶数。0,2,4,6,8.

    所以不一定要用ID来对应。如果是单纯的HTML的话。可以用Jquery来获得 EVEN的偶数TD的DOM集合

    var numTD=$("table td:even");//返回一个JQUERY对象。封装4个TD对象。

    numTD.click(){function(){alert("click");}}//Jquey很强大。可以自动对封装对象上的每一个单独的DOM对象进行事件的注册。

    不需要我们在去FOR一个一个的进行注册了。

    鼠标点击时。我们对TD进行插入文本框,

    插入节点要先创建节点。

    DOM.CREATE

    JQUERUY

    numTD.click(){

    var inputObj=$(<input type='text'/>"");//可以直接写HTML作为DOM对象包装成一个Jquery对象。

    var tdObj=$(this);//this代表响应的DOM 的对象。

    inputObj.appendTo(tdObj);//插入文本框  appendTo方法是:把文本框放如TD中。

    append方法是:对TD对象追加一个文本框

    让文本框充满整个TD

    inputObj.width(tdObj.width());

    去掉文本框的边框:border-width:0  //文本框边框为0

    inputObj.css("border-width:0");

    //让文本框中的文字格式和TD的格式大小差不多。

    inputObj.css("font-size:16px");

    //设置文本框的背景色和当前被填充的TD的背景色一样

    inputObj.css("background-color,tdObj.css("background-color")");

    插入前要把当前TD的内容放入文本框中。

    inputObj.val(tdObj.html());//TD对象是HTML的值。而InputObj对象是VAL的值。

    tdObj.html("");//清空TD内容

    }

    经典代码

    Jquery绝大多数一个链式的写法。它的方法调用后,会返回一个Jquery对象。

    支持继续对其操作。例如:Java中的StringBffure可以一直APpEND()

    意思就是:Jquery可以利用其每次方法都返回Jquery对象,接着直接进行操作。

    EP:

    inputObj.css("font-size:16px").css("border-width:0").css("background-color,tdObj.css("background-color")");

    原因:TD插入input后没有被选中。如果用户想通过键盘输入必须在进行选中INPUT才行

    为了用户易用。我们要代码执行一个选中。 inputObj.get(0).select()//DOM对象的方法

    然后INPUT是在TD中的。所有你对INPUT的点击会造成点击方法的调用。

    如果想不对INPUT响应方法。

    这里设计一个冒泡思想。即DOM元素的操作是会向顶层元素传播的。

    我们这里可以对INPUT的CLICK对象写个方法。让它不要向TD上传播

    inputObj.click(){function(){

    return false;

    }}

    所有的文本框都是先获得焦点在获得文本框

    inputObj.trigger()//触发JS的事件

    inputObj.trigger("focus").trigger("select");

    IE 中。获得文本框,它自动帮你获得焦点。

    ----------按键操作-------------------------

    1.回车。确认

    inputObj.keyup(function(event){

    var keycode=event.which;//jQUERY获得键盘按键键值

    回车的键值是13

    ESC是 是27

    });

    2.ESC 取消

    有可能在INPUT和TD之间的缝隙点击,导致HTML语句的显示

    方法。

    可以在Click时判断

    if(tdObj.children("input").length>0){

    //有INPUT的时候,TD的鼠标点击不执行。

    return false;

    }

    坏处:没办法靠双击来进行保存。

    为了巩固知识,明早在把代码放上。

    本人声明: 个人主页:沐海(http://www.cnblogs.com/mahaisong) 以上文章都是经过本人设计实践和阅读其他文档得出。如果需要探讨或指教可以留言或加我QQ!欢迎交流!
  • 相关阅读:
    在React中使用Redux数据流
    开发中经常遇到的一些css样式问题
    记录一下CSS outline-width 属性
    使用git stash命令保存和恢复进度
    一分钟搭建好webpack通用坏境
    二维码生成(QRCode.js)
    IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
    如何进行网站性能优化
    JavaScript深拷贝与浅拷贝的理解
    新问题: 两个样式对同一个元素操作,为什么最新的样式没有起作用?(已解决)
  • 原文地址:https://www.cnblogs.com/mahaisong/p/2020060.html
Copyright © 2011-2022 走看看