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;

}

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

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