js动态的修改表格解决思路
日期：2014-05-16 浏览次数：20359 次
js动态的修改表格
这个效果是：
1个3行3列空白表格 点一下单元格
就变成文本框可以输入内容 移开光标 内容就留在了表格上
有个位置卡住了 ，高手指点下,初学谢谢了
<script>
function init(){
var td=document.getElementsByTagName("td");
for(var i=0; i<td.length; i++){
//alert(td[i]);
//td[i].innerText=i;
td[i].onclick=function(){
alert(i); //这个里面为什么打出来的是td.length？
}
}
}
</script>
------解决方案--------------------
<style type="text/css">
td{
border:thin;
border-style:solid;
text-align:center;
width:100px;
}
</style>
<script type="text/javascript">
function init(){
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var a=document.createElement("input");
a.type="text";
a.style.visibility="hidden";
tds[i].appendChild(a);
tds[i].onclick=en;
}
}
function en(){
var a=this.getElementsByTagName("input");
a[0].style.visibility="visible";
a[0].focus();
a[0].onblur=kk;
}
function kk(){
var a=this.value;
this.style.visibility="hidden";
this.parentNode.innerHTML=a;
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
这样试试 不过方法比较垃圾 等高手来吧 呵呵
这个效果是：
1个3行3列空白表格 点一下单元格
就变成文本框可以输入内容 移开光标 内容就留在了表格上
有个位置卡住了 ，高手指点下,初学谢谢了
<script>
function init(){
var td=document.getElementsByTagName("td");
for(var i=0; i<td.length; i++){
//alert(td[i]);
//td[i].innerText=i;
td[i].onclick=function(){
alert(i); //这个里面为什么打出来的是td.length？
}
}
}
</script>
------解决方案--------------------
<style type="text/css">
td{
border:thin;
border-style:solid;
text-align:center;
width:100px;
}
</style>
<script type="text/javascript">
function init(){
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
var a=document.createElement("input");
a.type="text";
a.style.visibility="hidden";
tds[i].appendChild(a);
tds[i].onclick=en;
}
}
function en(){
var a=this.getElementsByTagName("input");
a[0].style.visibility="visible";
a[0].focus();
a[0].onblur=kk;
}
function kk(){
var a=this.value;
this.style.visibility="hidden";
this.parentNode.innerHTML=a;
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
这样试试 不过方法比较垃圾 等高手来吧 呵呵
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
