问题描述:
我想要用ajax对产品列表中的信息进行编辑, 编辑效果如下:
第一次点击产品列表的单元格,单元格的内容处于选择状态,
第二次点击的时候可以对选定的单元格内容进行编辑,(具体效果请从附件下载,用IE浏览)
以上所描述的效果在IE下能实现,但在FF浏览器下很让我失望,我没有办法实现同样的效果,
请JS高手帮助我在IE/FF下都能实现的同样效果, 我QQ:79501973 在线等待！！！
以下是附件原码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><style>*{font-size:10pt;}</style>
<body>
<div align="center">第二次单击时可以编辑<br /></div>
<table width="500" border=1 align="center" cellpadding="3" id="quote">
<tr>
<td width="296" onclick="tcl(this,0,0)"><span>产品名称１</span></td>
<td width="180" onclick="tcl(this,0,1)"><span>580</span></td>
</tr>
<tr><td onclick="tcl(this,1,0)"><span>产品名称２</span></td>
<td onclick="tcl(this,1,1)"><span>1800</span></td></tr>
</table>
<p> </p>
<div align="center">单击就可以编辑<br /></div>
<table width="500" border=0 align="center" cellpadding="5" cellspacing="1" bordercolor="#CCCCFF" bgcolor="#CCCCFF">
<tr><td width="201" bgcolor="#FFFFFF"><span onclick="ck(this,1)">产品名称１</span></td>
<td width="276" bgcolor="#FFFFFF"><span onclick="ck(this,1)">580</span></td>
</tr>
<tr><td bgcolor="#FFFFFF"><span onclick="ck(this,1)">产品名称２</span></td>
<td bgcolor="#FFFFFF"><span onclick="ck(this,1)">1800</span></td>
</tr>
</table>
<div align="center"><br /> <br /></div>
<hr />
<div id="objInfo" style="color:blue;"></div>
<div id="msgInfo" style="color:red;"></div>
<script language="JavaScript">
function getCurVersion(){ //检测浏览器类型
var isIEPP = "ie"; //浏览器判断默认是IE
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=='Netscape')?1:0;
var isIE=(navigator.appName.indexOf('Microsoft')!=-1)?1:0;
}
if (isNN){ isIEPP = "ff"; }
return isIEPP;
}
// 单元格选择函数
function tcl(o,r,c){
/*
if(getCurVersion()=="ff"){ // 如果是ff浏览器
var span=o.childNodes[0];
var spanObj=span.childNodes[0].nodeName;
if(spanObj=="INPUT" || spanObj=="input"){return;}
//document.all.objInfo.innerText=spanObj;
ck(span,0);
//msgInfo.innerText= '';
}else{
*/
var td=document.all.quote.rows[r].cells[c];
var span=td.childNodes[0];
var spanObj=span.childNodes[0].nodeName;
if(spanObj=="INPUT" || spanObj=="input") return;
objInfo.innerText=spanObj;
var oVal=msgInfo.innerText;
var word = document.selection.createRange();
var st = document.body.createTextRange();
st.moveToElementText(td);
st.select();
var word = document.selection.createRange();
if(word.text.length>0){
msgInfo.innerText = word.text;
if(oVal==word.text){
ck(span,0);
msgInfo.innerText= '';
}else{
//msgInfo.innerText = '';
}
}
/* } */// end else
}
/*-----------------------------------------------------------*/
var Utils = new Object();
Utils.isTime = function(val){
var reg = /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/;
return reg.test(val);
}
Utils.fixEvent = function (e){
var evt = (typeof e == "undefined") ? window.event : e;
return evt;
}
Utils.srcElement = function(e){
if (typeof e == "undefined") e = window.event;
var src = document.all ? e.srcElement : e.target;
return src;
}
/*-----------------------------------------------------------*/
function ck(obj,s){
var oval;
// if(getCurVersion()=="ff"){
// oval = obj.textContent; //ff下获取值方法
// else{
oval = obj.innerText;
// }
var tag = obj.firstChild.tagName;
if(typeof(tag) != "undefined" && tag.toLowerCase() == "input"){ return;}
// 创建文本框
var inpt= document.createElement("INPUT");
inpt.style.width = (obj.offsetWidth + 10) + "px" ;
obj.innerHTML="";
obj.appendChild(inpt)
inpt.focus();
inpt.value = oval;
inpt.onkeypress = function(e) {
var evt = Utils.fixEvent(e);
var obj = Utils.srcElement(e);
if (evt.keyCode == 13){ inpt.blur();return false; }
if (evt.keyCode == 27){ obj.parentNode.innerHTML = oval; }
}
//失去焦点
inpt.onblur = function(e){
if (inpt.value.length > 0){ obj.innerHTML = "<span>"+inpt.value+"</span>"; }else{ obj.innerHTML = oval; }
}
}
</script>
</body>
</html>
fN7UwVxZ.rar
