高手，用js怎么实现这样的功能
日期：2014-05-16 浏览次数：20416 次
高手求助，用js如何实现这样的功能？
在table中每个td里都有值，如果点击td,td中出现一个input输入框, 输入框里显示原来td里的值，然后可以修改，修改后失去焦点会保存修改后的值，不修改就显示原来的值。请就用js做，不要用jquery,我不懂jquery
------解决方案--------------------
动态生成input也可以，
下面这个是用的障眼法。。。
在table中每个td里都有值，如果点击td,td中出现一个input输入框, 输入框里显示原来td里的值，然后可以修改，修改后失去焦点会保存修改后的值，不修改就显示原来的值。请就用js做，不要用jquery,我不懂jquery
------解决方案--------------------
动态生成input也可以，
下面这个是用的障眼法。。。
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
* {
margin:0; padding:0; font-size:14px;
}
table {
margin:100px;
}
td {
width:200px; height:30px; line-height:30px;
border:1px solid blue;
}
input {
width:200px; height:30px; line-height:30px;
border:0;
}
</style>
</head>
<body>
<table>
<tr>
<td><input value="1-1" /></td>
<td><input value="1-2" /></td>
</tr>
<tr>
<td><input value="2-1" /></td>
<td><input value="2-2" /></td>
</tr>
</table>
<script>
function $(el){
return typeof el == 'string' ? document.getElementById(el) : el;
}
function $t(name, cot){
cot = cot || document;
return cot.getElementsByTagName(name);
}
var arr = $t('input');
for(var i = 0, len = arr.length; i < len; i++){
arr[i].onfocus = function(){
this.style.border = '1px solid red';
this.parentNode.style.border = '0';
}
arr[i].onblur = function(){
this.style.border = 'none';
this.parentNode.style.border = '1px solid blue';
}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
