标签：htm pre blog line his cti ext var getattr
最近又在搞一些表格的东西，还要每个格子里面可以编辑的。
可编辑方法
第一种是H5的方法 (可以直接把元素变成可编辑)
1 contenteditable=true
第二种方法替换（把内容替换成input然后替换回去）
JQ：
1 $(this).replaceWith(‘text‘);
第三种方法只读（把input的readonly去掉就可以编辑了）
HTML：
<input type="text" readonly=readonly>
JQ：
1 $(input).removeAttr(‘readonly‘);
复习JS属性操作
1 obj.getAttribute(‘contenteditable‘); 2 obj.setAttribute(‘contenteditable‘, ‘true‘); 3 obj.removeAttribute(‘contenteditable‘);
JQ
1 $(this).attr(‘contenteditable‘, ‘true‘) 2 $(this).removeAttr(‘contenteditable‘, ‘true‘)
委托事件
有时会操作大量一样的代码，可以用委托事件，小量代码用委托事件也会有性能上的优化
JS的委托事件（看了半天原来是这么简单）
1 document.onclick = function(event) { 2 event = event || window.event; 3 var target = event.target || event.srcElement; 4 // console.log(target.nodeName) 5 if (target.nodeName == target.nodeName) { 6 for (var o = 0; o < len; o++) { 7 tag[o].removeAttribute(‘contenteditable‘); 8 } 9 } 10 };
JQ就更加简单了
1 $(‘table‘).on(‘click‘, ‘tbody td‘, function(e) { 2 $(this).attr(‘contenteditable‘, ‘true‘); 3 $(this).focus(); 4 e.stopPropagation(); 5 })
哪个方便哪个快用哪个！
标签：htm pre blog line his cti ext var getattr
原文地址：http://www.cnblogs.com/hasubasora/p/6677096.html
