类似jqruy的可操作表格(页 1) - 前台制作与脚本专栏 - 经典论坛网页-网站-制作-设计-编程

alize 发表于 2008-8-28 14:14

类似jqruy的可操作表格

最近一段时间学js...终于在今天完成了一个东东..但是能不是很完善...放上来大家研究下..
效果很好的说..但是不是很完美.不IE下面问题有点多.而且表格是死的..不能自己去生成
有没有高手来完美下...期待达人出现... 只看不回的贴一律拉出去切了...:D :D
代码如下..
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
</head>

<body><table width="100%" border="1" cellspacing="1" cellpadding="1" id="aa" >
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
</table>
<div id="res"></div>
</body>
</html>
<script>

function initTbFunc(){
var tb = document.getElementById('aa');
var tds= tb.getElementsByTagName("td");

for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onclick = function ev(e){
   //var x = e.clientX;
   //var y = e.clientY;
   var td=this;
   //var input=document.getElementById('res').innerHTML = "x:"+x+"/y:"+y;
   var newiput = document.createElement("input");
   newiput.style.width = '100%';
   newiput.style.height = '100%';
   this.appendChild(newiput);
   newiput.focus();
   var tdRef = this;
   newiput.onblur = function(e){
   tdRef.removeChild(this);
var text=newiput.value;
td.firstChild.nodeValue = text;

//alert(text);
   }
   //alert(input+" # Dom Tag Name is:"+this.tagName);

   //alert(event_y);
}
}
}

window.onload = initTbFunc;
</script>
[/html]

提示:
1. 你可以点击表格任何一个地方;
2.你可以输入任何一个东西..
3.结果自己看....

xeonwell 发表于 2008-8-28 14:32

防止被切

顶下楼猪, 期待更完善

tangl198710 发表于 2008-8-28 14:35

如果要与数据连接操作
要用ajax吧。？

joelioa 发表于 2008-8-28 14:36

input没输入的话，
td的值应该返回原来的吧。

alize 发表于 2008-8-28 15:15

input 没输入的应该是返回原来的值.由于做的时间短.. 还没完善到这步,
其实我的想法是最好这个表格也是有js 来自己生成的..但是不知道如何做最好...

faeng220 发表于 2008-8-29 09:12

效果:

　　把所有单元格都点一遍....单元格都没了...

skybot 发表于 2008-8-29 10:04

如果要做成Grid的话要动态的创建一个js的data 这个data 保存着当前表格的状态

WellFrog 发表于 2008-8-29 10:38

这个不重要。
重要的是：通用的数据的读取、生成表格以及最后的保存

fkueaps 发表于 2008-8-29 11:35

表格自动生成是另一个功能了，跟你的这个方法关系不大。
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试</title>
</head>
<body><table width="100%" border="1" cellspacing="1" cellpadding="1" id="aa" >
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
  <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
  </tr>
</table>
<div id="res"></div>
</body>
</html>
<script>
function initTbFunc(){
var tds= document.getElementById('aa').getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onclick = function ev(e){
if(!this.xxyy){this.xxyy = 1;}//标记this.onclick事件触发状态;
if(this.xxyy==1){
var td_text=this.innerHTML;//存储原始值
this.innerHTML = ' ';//清空原始值，以便生成新的input
this.xxyy=2;//设置this.onclick事件关闭
var newiput = document.createElement('input');
newiput.style.width    = '100%';
newiput.style.height    = '100%';
newiput.style.lineHeight = '100%';
newiput.style.padding    = '0';
newiput.style.border    = '0';
newiput.value = td_text.replace(' ',' ');//加入原始值：如果原始值包含 ，则替换为空格。
this.appendChild(newiput);
newiput.focus();
newiput.onblur = function(e){
this.parentNode.xxyy=1;//设置this.onclick事件开启
var text=this.value;
if(text==td_text){//alert("未输入值");
this.parentNode.innerHTML = td_text;//返回原始值
}
else if(text!=td_text){//alert("输入值");
text=text.replace(' ',' ');//如果text值包含空格，则替换为 
if(text==''){text=' '};
this.parentNode.innerHTML = text;
}
}
}
}
}
}
window.onload = initTbFunc;
</script>
[/html]
[code]
function initTbFunc(){
var tds= document.getElementById('aa').getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
var td = tds[i];
td.onclick = function ev(e){
if(!this.xxyy){this.xxyy = 1;}//标记this.onclick事件触发状态;
if(this.xxyy==1){
var td_text=this.innerHTML;//存储原始值
this.innerHTML = ' ';//清空原始值，以便生成新的input
this.xxyy=2;//设置this.onclick事件关闭
var newiput = document.createElement('input');
newiput.style.width    = '100%';
newiput.style.height    = '100%';
newiput.style.lineHeight = '100%';
newiput.style.padding    = '0';
newiput.style.border    = '0';
newiput.value = td_text.replace(' ',' ');//加入原始值：如果原始值包含 ，则替换为空格。
this.appendChild(newiput);
newiput.focus();
newiput.onblur = function(e){
this.parentNode.xxyy=1;//设置this.onclick事件开启
var text=this.value;
if(text==td_text){//alert("未输入值");
this.parentNode.innerHTML = td_text;//返回原始值
}
else if(text!=td_text){//alert("输入值");
text=text.replace(' ',' ');//如果text值包含空格，则替换为 
if(text==''){text=' '};
this.parentNode.innerHTML = text;
}
}
}
}
}
}
window.onload = initTbFunc;
[/code]

[[i] 本帖最后由 fkueaps 于 2008-8-29 17:49 编辑 [/i]]

wangdybyt 发表于 2008-8-29 15:26

期待更多....

alize 发表于 2008-8-29 16:06

点击完了所有表格表格会消失这个情况只是在IE里面出现..具体解决办法我也没想到好的方式..不知道有人能解决下不..

fkueaps 发表于 2008-8-29 17:48

回复 11# alize [楼主] 的帖子

不是给你解决了么，你处理的还不够精致。很多问题没考虑到，例如输入空白字符怎么办？如何保存已经存在TD内的字符？很多细节哦～

页: [1]

经典论坛's Archiver

类似jqruy的可操作表格

回复 11# alize [楼主] 的帖子