真正的代码:
发
<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;
}
坏处:没办法靠双击来进行保存。
为了巩固知识,明早在把代码放上。