<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function editcell(obj){
if(obj.innerText==""){
obj.innerHTML = "<input value='' onblur='update(this.value)'>";
}else{
obj.innerHTML = "<input value="+obj.innerText+" onblur='update(this.value)'>";
}
} function update(txt){
document.getElementById('td2').innerText = txt;
}
</script>
</HEAD> <BODY>
<TABLE border='1'>
<TR>
<TD id="td2" onDblclick="editcell(this)">111</TD>
</TR>
</TABLE>
</BODY>
</HTML>
简单的效果
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function editcell(obj){
if(obj.innerText==""){
obj.innerHTML = "<input value='' onblur='update(this.value)'>";
}else{
obj.innerHTML = "<input value="+obj.innerText+" onblur='update(this.value)'>";
}
} function update(txt){
document.getElementById('td2').innerText = txt;
}
</script>
</HEAD> <BODY>
<TABLE border='1'>
<TR>
<TD id="td2" onDblclick="editcell(this)">111</TD>
</TR>
</TABLE>
</BODY>
</HTML>
简单的效果
<head>
<STYLE>
.td1 { color: white; background-color: orange;}
.td2 { color: white; background-color: #0099ff;}
.td3 { color: white; background-color: #336699;}
</STYLE>
<SCRIPT>
function editCell (cell) {
if (document.all) {
cell.innerHTML = '<INPUT ID="editCell" ONCLICK="event.cancelBubble = true;" ONCHANGE="setCell(this.parentElement, this.value)" ONBLUR="setCell(this.parentElement, this.value)" VALUE="' + cell.innerText + '" SIZE="' + cell.innerText.length + '">'; document.all.editCell.focus();
document.all.editCell.select();
}else if (document.getElementById) {
cell.normalize();
var input = document.createElement('INPUT');
input.setAttribute('value', cell.firstChild.nodeValue);
input.setAttribute('size', cell.firstChild.nodeValue.length);
input.onchange = function (evt) { setCell(this.parentNode, this.value); };
input.onclick = function (evt) { evt.cancelBubble = true;
if (evt.stopPropagation)
evt.stopPropagation();
};
cell.replaceChild(input, cell.firstChild);
input.focus();
input.select();
}
}function setCell (cell, value) {
if (document.all)cell.innerText = value;
else if (document.getElementById)cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
<TD ONCLICK="editCell(this);" CLASS="td1">欢迎光临</TD>
<TD ONCLICK="editCell(this);" CLASS="td2">[孟宪会之精彩世界]</TD>
<TD ONCLICK="editCell(this);" CLASS="td3">http://lucky.myrice.com</TD>
</TR>
</TABLE>
</body>
</HTML>孟子的编辑
var NowTr,PreTr;
document.ondblclick=function(e)
{
e=e||event;
PreTr=NowTr;
var tag=e.srcElement||e.target;
if(tag.tagName=="TR")
NowTr=tag;
else if(tag.tagName=="TD")
NowTr=tag.parentNode;
else{ Update(NowTr,"1");NowTr=null;return;}
if(NowTr!=PreTr)
{
if(PreTr)Update(PreTr,"1");
Update(NowTr);
}
}
function Update(NowTr,Type)
{
for(var i=0;i<NowTr.cells.length;i++)
{
NowTr.cells[i].innerHTML=Type=="1"?NowTr.cells[i].firstChild.value:'<input type="text" value="'+NowTr.cells[i].innerHTML+'"/>';
}
}</script>
<table border='1'>
<tr><td>1_1</td><td>1_2</td><td>1_3</td></tr>
<tr><td>2_1</td><td>2_2</td><td>2_3</td></tr>
<tr><td>3_1</td><td>3_2</td><td>3_3</td></tr>
<tr><td colspan="2">4_1</td><td>4_2</td></tr>
<tr><td>5_1</td><td colspan="2">5_2</td></tr>
</table>
if(obj.tagName != "TD") return;
NowTr=obj.parentNode;
for(var i=0;i<NowTr.cells.length;i++)
{
NowTr.cells[i].innerHTML="<input size=20 style='border:1px ' onblur='checkOk(this)' value=" + NowTr.cells[i].innerHTML+ ">" ;
}
上面是我自己写的。这个错在哪个地方阿？我把value=" + NowTr.cells[i].innerHTML+ "改称value="aaa" 就可以出来3个文本框，并且值都等于aaa。
不能用什么意思??我测试过了ie和ff都可以运行啊,是双击,不是单击
<TR>
<TD width="130"><div contentEditable style="width:100px;overflow:hidden;white-space:pre ">default</div>
</TD>
<TD width="130"><div contentEditable style="width:100px;overflow:hidden;white-space:pre ">default</div>
</TD>
</TR>
</TABLE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language=javascript1.2>//定义全局的表格行列值
var col = 5;
var row = 2;
//currRowIndex 选定行
var currRowIndex = 0;
//表单域数组(这部分作废)-----------------
var elementNames = new Array(col);
var k = 0;
for(k=0;k<col;k++)
elementNames[k] = k;
//---------------------------------------//标题头数组
var headers = new Array(col);
for(k=0;k<col;k++)
{
headers[k] = "第" + k + "列";
}//columnPropertys : 装载要创建的列读写属性
var colPropertys = new Array(col)
for(k=0;k<10;k++)
colPropertys[k] = 1; colPropertys[0] = 0;//colDefaultValues : 代表每次增加行的时候需要装入的默认值
var colDefaultValues = new Array(col);
for(k=0;k<col;k++)
{
if(k%2==0)
colDefaultValues[k] = "o";
else
colDefaultValues[k] = "j"; //代表这个不是默认值
}//dataArray : 需要修改的数据集,修改之前预先装入,供用户参考
var dataArray = new Array(row*col);
var m=0,n=0;
for(m=0;m<row;m++)
{
for(n=0;n<col;n++)
{
dataArray[m*col + n] ="array(" + m + "," + n + ")"; //注意这里代表2维数组
}
}
/*
*====================================================================================================================
*/
var oPopup = window.createPopup();//创建一个公共的可编辑的表格
//参数：
// formName : 表单名
// action : 代表当前要执行的提交动作 : 1:add 2:del 3:modefy 4:query
// formAction : 表格对应Form的Action
// tableId ：表格ID
// colNum：表单列数目
// rowNum：初始表格的行数目
function CreateTable(formName,action,formAction,tableId,colNum,rowNum)
{
var startStr = new String("");
var endStr = new String("");
var colStr = new String("");
startStr = "<form name=\"" + formName + "\" method=post action=\"" + formAction + "\">";
startStr += "<table id=\"" + tableId +"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
colStr = createTrs(colNum,rowNum);
endStr = "</table>"; //创建用来获取最后表格输出数据的隐藏域
var hiddens = CreateHiddens(colNum,action);
endStr += hiddens;
endStr += "</form>";
//输出表格
//document.forms(0).elements("t").value = (startStr + colStr + endStr);
document.write(startStr + colStr + endStr);
}function CreateHiddens(cols,action)
{
var str = new String("");
var i=0;
for(i=0;i<cols;i++)
{
str +="<input type=\"hidden\" name=\"col" + (i+1) + "\" >";
}
str+="<input type=hidden name=\"action\" value=\"" + action + "\">";
return str;
}function createTrs(colNum,rowNum)
{
var colStr = new String("");
var i = 0;
var j = 0; colStr += "<tr bgColor='#00ccff'>"
//创建表头行
colStr += "<td onClick=orderTb1(this,1); onMouseOver=\"showTip('单击对本列排序');\" onMouseOut=\"hideTip();\"><center>"
colStr += "序号";
colStr += "</center></td>";
for(i=1;i<=colNum;i++)
{
colStr += "<td align=center onClick=orderTb1(this,1); onMouseOver=\"showTip('单击对本列排序');\" onMouseOut=\"hideTip();\" >";
colStr += headers[i-1];
colStr += "</td>";
} //创建表体行
for(i=0;i<rowNum;i++)
{
colStr += "<tr ";
colStr += "onDblClick=\"ChangeInput(this);\" "; //表格行中的事件支持部分
colStr += "onBlur=\"ResetTR(this);\" >";
//创建每行的所有单元格
colStr += "<td onClick=SelectRow(this);>";
colStr += i+1;
colStr +="</td>";
for(j=1;j<=colNum;j++)
{
colStr += "<td onMouseOut=\"this.bgColor='#FFFFFF';\" onMouseOver=\"this.bgColor='#00CCFF';\" >";
colStr += dataArray[i*colNum+j-1];
colStr +="</td>";
}
colStr +="</tr>";
}
return colStr;
}//把某行转变为输入状态
function ChangeInput(objTR)
{
var str = new String("");
var i = 0;
for(i=1;i<objTR.cells.length;i++)
{
str = "<input type=text name=\"" + elementNames[i-1] + "\" style=\"width:" + objTR.cells[i].width + "\" ";
//装入默认值
if(colDefaultValues[i-1]=="j") //j代表该列不能装入默认值
str += "value=\"" + objTR.cells[i].innerText + "\"";
else//否则装入默认值
str += "value=\"" + colDefaultValues[i-1] + "\"";
//控制控件的读写属性
if(colPropertys[i-1] == 0)
{
str += " disabled ";
}
str += "/>";
objTR.cells[i].innerHTML = str;
} objTR.ondblclick=doNothing; //使行保持原始状态
}//把行恢复为非输入状态
function ResetTR(objTR)
{
var str = new String("");
var i = 0;
for(i=0;i<objTR.cells.length;i++)
{
var objChild;
var tmpStr = "";
tmpStr = objTR.cells[i].innerHTML; //里面包含控件
if(objTR.cells[i].firstChild!=undefined && objTR.cells[i].firstChild.value!=undefined)
{
tmpStr = objTR.cells[i].firstChild.value;
if(tmpStr=="")
tmpStr = " "
objTR.cells[i].innerHTML = tmpStr + " ";
continue;
}
//里面不包含控件
if(tmpStr==" " || tmpStr=="")
{
if(objTR.cells[i].innerHTML!="")
tmpStr += objTR.cells[i].innerHTML;
else
tmpStr += " ";
}
objTR.cells[i].innerHTML = tmpStr; if(objTR.cells[i].innerHTML=="")
objTR.cells[i].innerHTML=" ";
}
}//对表格指定列进行排序
function orderTB(objTB,index,type){
for(var i=1;i<(objTB.rows.length-1);i++){
for(var j=i+1;j<objTB.rows.length;j++){
var tmp1,tmp2;
if(objTB.rows[j].cells[index].firstChild.value==undefined)
tmp1 = objTB.rows[j].cells[index].innerText;
else
tmp1 = objTB.rows[j].cells[index].firstChild.value;
if(objTB.rows[i].cells[index].firstChild.value==undefined)
tmp2 = objTB.rows[i].cells[index].innerText;
else
tmp2 = objTB.rows[i].cells[index].firstChild.value;
if(tmp1>tmp2)
{
objTB.moveRow(j,i);
}
}
}
}function orderTb1(objTD,type)
{
var objTR =objTD.parentElement;
var objTable = objTR.parentElement;
var colIndex = objTD.cellIndex;
orderTB(objTable,colIndex);
}
[/code]
//在表格末尾增加一行
function InsertRow(tableId)
{
var objTable = document.getElementById(tableId);
var col = objTable.cells.length/objTable.rows.length;
var row = objTable.rows.length;
var objRow = objTable.insertRow(); //增加行
var i = 0;
//取得最大序号
var max1 = 1;
for(i=1;i<row-1;i++)
{
var tmpMax = 1;
if(parseFloat(objTable.rows[i].cells[0].innerText) > parseFloat(objTable.rows[i+1].cells[0].innerText))
{
tmpMax = parseFloat(objTable.rows[i].cells[0].innerText);
}
else
{
tmpMax = parseFloat(objTable.rows[i+1].cells[0].innerText);
}
if(tmpMax>=max1)
max1= tmpMax;
}
for(i=1;i<=col;i++)
{
var objCell = objRow.insertCell();
objRow.cells[0].innerText = parseFloat(max1)+1;
objCell.innerHTML = " ";
objCell.onmouseover = Td_MouseOver_Handle;
objCell.onmouseout = Td_MouseOut_Handle
objRow.cells[0].onclick = TD_Click_Handle;
objRow.cells[0].onmouseover = doNothing;
objRow.cells[0].onmouseout = doNothing;
}
//为新增的行提供事件绑定支持
//objRow.attachEvent('ondblclick', dblClick_Handle);
objRow.ondblclick = dblClick_Handle;
objRow.onblur = click_Handle;
}//删除最后1行
function DeleteRow(tableId)
{
var objTable = document.getElementById(tableId);
if(objTable.rows.length==1)
{
alert("对不起，你不能删除表格头!!!");
return;
}
if(confirm("确定删除?"))
{
objTable.deleteRow();
}
}//选定指定行
function SelectRow(objTD)
{
var objTR =objTD.parentElement;
var objTable = objTR.parentElement;
for(var i=1;i<objTable.rows.length;i++)
objTable.rows[i].cells[0].bgColor = "#ffffff";
objTD.bgColor="#ff0000";
currRowIndex = objTR.rowIndex;
}//删除指定的行
function DeleteOneRow(tableId,rowIndex)
{
var objTable = document.getElementById(tableId);
var objTable = document.getElementById(tableId);
if(objTable.rows.length==1 || rowIndex==0)
{
alert("对不起，你首先必须选择要删除的行！！！");
return;
}
if(confirm("确定删除?"))
{
objTable.deleteRow(rowIndex);
currRowIndex = 0;
}
else
{
for(var i=1;i<objTable.rows.length;i++)
{
objTable.rows[i].cells[0].bgColor = "#ffffff";
currRowIndex = 0;
}
}
}//鼠标选择指定列
function TD_Click_Handle()
{
SelectRow(this)
}//鼠标移入事件支持
function Td_MouseOver_Handle()
{
this.bgColor = "#00ccff";
}//鼠标移出事件支持
function Td_MouseOut_Handle()
{
this.bgColor = "#ffffff";
}//鼠标双击事件支持
function dblClick_Handle()
{
ChangeInput(this);// 切换到输入状态
this.ondblclick=doNothing;
}//鼠标单击事件支持
function click_Handle()
{
ResetTR(this);
}
//保持行的原始状态
function doNothing()
{
return;
}function showTip(msg)
{
with (oPopup.document.body)
{
style.backgroundColor="lightyellow";
style.border="solid black 1px";
style.fontSize = 12;
innerHTML=msg;
}
oPopup.show(event.x, event.y, 95, 16, document.body);
}
function hideTip()
{
if(oPopup!=undefined)
oPopup.hide();
}
//==============================格式化字符串函数(删除前后空格)
function trim(str)
{
var tmpStr = new String(str);
var startIndex = 0,endIndex = 0;
for(var i=0;i<tmpStr.length;i++)
{
if(tmpStr.charAt(i)==" ")
{
continue;
}
else
{
startIndex = i;
break;
}
}
for(var i=tmpStr.length;i>=0;i--) //注意开始最大下标必须减1
{
if(tmpStr.charAt(i-1)==" ")
{
continue;
}
else
{
endIndex = i;
break;
}
}
tmpStr = tmpStr.substring(startIndex,endIndex);
return tmpStr;
}
//submit 方法
function getData(tableId,form)
{
var objTable = document.getElementById(tableId);
var cols = objTable.cells.length/objTable.rows.length-1;
var rows = objTable.rows.length-1;
//为每个隐藏域设置值
var i=0,j=0;
for(i=1;i<=cols;i++)
{
for(j=1;j<=rows;j++)
{
if(objTable.rows[j].cells[i].firstChild.value==undefined)
{
document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].innerText);
}
else
document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].firstChild.value);
document.forms(form).elements("col" + i).value += "#";
}
}
document.forms(form).submit();
}</script>
</head>
<body>
<input type="button" onClick="InsertRow('tableId');" value="InsertRow">
<input type="button" onClick="DeleteRow('tableId');" value="DeleteRow">
<input type="button" onClick="getData('tableId','specForm');" value="submit">
<input type="button" onClick="DeleteOneRow('tableId',currRowIndex)" value="Delete Spec Row">
<input type="button" onClick="orderTB(document.getElementById('tableId'),3);" value="order Spec Col">
</body>
</html>
<script language="javascript1.2">
CreateTable('specForm','1','sub.asp','tableId',col,row);
</script>